When designing reusable components with React, you may need to dig into the children prop, say to wrap each child in another element or change the ordering. Once you've done so, you may also be tempted to do different things depending on the index of the child. An example from the Facebook codebase is the <LeftRight> component, which floats one child to the left, and another to the right. Its API looks like this:

<LeftRight>
  <div>floated to the left</div>
  <div>floated to the right</div>
</LeftRight>

Instead, simplify the API of <LeftRight> and pass the two children as props instead:

<LeftRight
  left={<div>floated to the left</div>}
  right={<div>floated to the right</div>}
/>

The props-based version:

• Is easier to implement – no mucking about with React.Children
• Is easier to use, since the API to the component is now explicit
• Can have better validation, like requiring the props to be of a certain type
• Is more flexible – what if left wasn't required?

This post was inspired by spicyj's comment on a React issue.