Reading Class 29: Component Composition - mwilkin-401-advanced-javascript/bend-javascript-401d2 GitHub Wiki

Principle of Component Composition: render anything that’s passed to the component with the children property. This allows the component to be reused where needed throughout the application providing a mechanism for composing multiple components together to achieve something bigger.

The React children prop is one special prop provided by React to render something within a component where the component isn’t aware ahead of time what it will be. For example,

  <button type={type} onClick={onClick}>
    {children}
  </button>
);

The button element becomes a reusable Button component whereas the Button component doesn’t know what it renders except for the button.

This concept can be extrapolated to larger components as well, for example a form component. There may be an instance where you’d want to reuse a form throughout an application, yet in each instance the form captured served a different purpose [essentially a generalized form]. The above principle could be applied and by passing in props to specialize the component.

The Form renders the HTML form element, but everything within is rendered with React’s children. The same applies to the components within the Form component, which follow the same principle of composition in themselves, by just rendering anything that’s passed to them with the children property.