Component Extensibility & Toggling Children

Component Extensibility.md

A lot of times I'll see developers author a component like this:

const Component = ({shouldShowSomething}) => {
  return (
    <div>
      <div>Some Elements</div>
      { shouldShowSomething ? <div>Something</div> : null }
    </div>
  );
};

Component.defaultProps = { shouldShowSomething: true };

I would like to propose that while sometimes that behavior is what you want, you generally are looking for something more extensible that accomplishes the same goal.

const Component = ({shouldShowSomething}) => {
  return (
    <div>
      <div>Some Elements</div>
      { shouldShowSomething}
    </div>
  );
};

Component.defaultProps = {
  shouldShowSomething: <div>Something</div>
};

This approach allows you to pass in null to disable said "Something" but it also allows you to pass in any other arbitrary react component making your component more extensible than a simple boolean.