Skip to content

Instantly share code, notes, and snippets.

@iammerrick
Last active December 11, 2015 18:08
Show Gist options
  • Save iammerrick/b7d72c01fd3733eca77c to your computer and use it in GitHub Desktop.
Save iammerrick/b7d72c01fd3733eca77c to your computer and use it in GitHub Desktop.
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