Passing Elements as Props in React

I like this nuanced post by David Barral in which he goes over all the options on how to configure a Confirm component: what exactly do you pass in as props.

In this story we are going to see a simple technique that allows you to write friendly customizable components with simple APIs, just by using the basic React building blocks: the element.

The result finds the middle ground between “props explosion” (one prop per customisable part) and render props:

// Component
const Confirm = ({
  children,
  onAccept,
  onReject,
  acceptButton = <Button>Ok</Button>,
  rejectButton = <Button>Cancel</Button>,
}) => (
  <div className="confirm">
    <div className="confirm-header">
      <h1>Confirm</h1>
    </div>
    <div className="confirm-content">{children}</div>
    <div className="confirm-footer">
      {React.cloneElement(acceptButton, { className: "accept-btn", onClick: onAccept })}
      {React.cloneElement(rejectButton, { className: "reject-btn", onClick: onReject })}
    </div>
  </div>
);

// Usage
<Confirm
  acceptButton={<Button>Yep</Button>}
  rejectButton={<Button>Nope</Button>}
  onAccept={() => {}}
  onReject={() => {}}
>
  You sure?
</Confirm>

Passing Elements as Props in React →