React - Children Element

About

When you create an element, you pass children element that will build the React DOM tree.

Because component are user-defined element, it applies also when your create a component.

Related: See also React - Composite Component (Layout) / Container Component

Jsx

The below example codes are created with JSX.

You may use pure javascript with the createElement function to create a element but this is not the common case.

Literal and array

Children element can be added in Jsx:

  • as literal
  • and/or as array of Jsx Expression

Demo:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
  • The main function (ie app) that adds the welcome function as child:
    • via a literal
    • via an array
function App() {
  
  // Array of JSX
  let children = [];
  children.push(<Welcome name="Foo" />);
  children.push(<Welcome name="Bar" />);
  
  return (
    <div> {/* Components must return a single root element. This is the why of the ''<div>'' (to contains all the Welcome elements) */}
      <Welcome name="World" /> {/* Literal */}
      {children}
    </div>
  );
}
  • Result:

Passing children components via props

Components can be passed:

props.children

props.children pass all Children Components.

Some components don't know their children ahead of time.

This is especially common for components that represent generic “boxes” like:

Such components must use the special children prop to pass children elements directly into their output.

  • The container component
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}
  • The parent component using the generic container
function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for stopping by !
      </p>
    </FancyBorder>
  );
}
  • Result:

named props properties

Because jsx are just expression, you can pass as many component as you wish in other property of the props object.

The below example shows how to create a two panes components and to fill it with two Jsx children components that are stored in:

  • the left property
  • and right property

of the props object

Demo:

  • The container component with two regions that expects two children.
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}
  • The component going to the left and right region.
// A left compo
function Left() {
  return <div className="Left">Left</div>;
}

// A Right compo
function Right() {
  return <div className="Right">Right</div>;
}
  • The Main component calling the container with two regions
function App() {
  return (
    <SplitPane
      left={
        <Left />
      }
      right={
        <Right />
      } />
  );
}

Management

Child Modification

Parent components modify can modify a child:

  • by re-render it with new props or new state.
  • or with ref (for instance of React component, or DOM element)

Requiring Single Child

With PropTypes.element of the prop-type library, you can specify that only a single child can be passed to a component as children.

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // This must be exactly one element or it will warn.
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

Documentation / Reference


Powered by ComboStrap