Passing Elements as Props in React

Written by / Original link on Dec. 2, 2019


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 = ({
  acceptButton = <Button>Ok</Button>,
  rejectButton = <Button>Cancel</Button>,
}) => (
  <div className="confirm">
    <div className="confirm-header">
    <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 })}

// Usage
  onAccept={() => {}}
  onReject={() => {}}
  You sure?

Passing Elements as Props in React →

1f5e3.png Rhymes perfectly well with Kent C. Dodds’ advice on how to optimize React re-renders using one simple trick

tutorialzine daylerees elsewhere link bram

« OpenCFP Engineering Diary -- Adding Doctrine - The Power of the JSON.stringify() replacer parameter »