Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Component Extensibility & Toggling Children

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.