Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 42

Beginner

React Props and Children

Master prop drilling, children, and patterns for composable component APIs.

TL;DR

01Pass data to children using props in a parent component.
02Use children to accept JSX from parent components.
03Avoid prop drilling by using Context or composition patterns.

Tips

01Use composition and Context instead of drilling props through many levels — it makes code cleaner and easier to maintain.

Warnings

01Don't pass too many props to a single component — it's a sign to break it into smaller, more focused components.

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 43

Beginner

React Props and Children

(continued)

Basic Props

Pass data to child components using props as an object.

function Greeting({ name, age }) {
  return <p>Hello {name}, age {age}</p>;
}

<Greeting name="Alice" age={30} />

Destructure props for cleaner code in function components.

function Button({ label, onClick, disabled = false }) {
  return (
    <button onClick={onClick} disabled={disabled}>
      {label}
    </button>
  );
}

Use default values for optional props.

function Card({ title = "Untitled", content }) {
  return <div><h2>{title}</h2><p>{content}</p></div>;
}

Pass functions as props to handle events from children.

<Button onClick={() => handleClick()} label="Click me" />

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 44

Beginner

React Props and Children

(continued)

Using Children

Accept JSX as children to create flexible wrapper components.

function Card({ children, title }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </div>
  );
}

<Card title="Welcome">
  <p>This is card content</p>
</Card>

Children is a special prop that contains nested JSX.

Multiple children are passed automatically as an array.

<Container>
  <Header />
  <Main />
  <Footer />
</Container>

Use React.Children.map to iterate over children.

function Row({ children }) {
  return (
    <tr>
      {React.Children.map(children, (child, index) => (
        <td key={index}>{child}</td>
      ))}
    </tr>
  );
}

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 45

Beginner

React Props and Children

(continued)

Prop Drilling and Solutions

Prop drilling occurs when passing props through many levels.

// Level 1
<App user={user}>
  // Level 2
  <Layout user={user}>
    // Level 3
    <Sidebar user={user}>
      // Level 4
      <Profile user={user} />
    </Sidebar>
  </Layout>
</App>

Use Context to avoid prop drilling for shared data.

const UserContext = createContext();

<UserContext.Provider value={user}>
  <App />
</UserContext.Provider>

function Profile() {
  const user = useContext(UserContext);
  return <div>{user.name}</div>;
}

Use composition to pass components instead of data.

<Layout sidebar={<Sidebar />}>
  <Main />
</Layout>

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 46

Beginner

React Props and Children

(continued)

Component Composition Patterns

Build flexible layouts by accepting components as props.

function Page({ header: Header, content: Content, footer: Footer }) {
  return (
    <>
      <Header />
      <Content />
      <Footer />
    </>
  );
}

<Page
  header={<Header />}
  content={<MainContent />}
  footer={<Footer />}
/>

Use the render prop pattern for dynamic content.

function DataFetcher({ render }) {
  const [data, setData] = useState(null);
  useEffect(() => { fetchData().then(setData); }, []);
  return render(data);
}

<DataFetcher render={(data) => <List items={data} />} />

Compose small, focused components for reusability.

<Modal>
  <Modal.Header>Title</Modal.Header>
  <Modal.Body>Content</Modal.Body>
  <Modal.Footer>Actions</Modal.Footer>
</Modal>

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 47

Beginner

React Props and Children

(continued)

Advanced Patterns

Clone and modify children with cloneElement.

function FormFields({ children, error }) {
  return React.Children.map(children, (child) =>
    React.cloneElement(child, { error })
  );
}

Use children as a function for render props.

function Toggle({ children }) {
  const [open, setOpen] = useState(false);
  return children({ open, toggle: () => setOpen(!open) });
}

<Toggle>
  {({ open, toggle }) => (
    <button onClick={toggle}>
      {open ? "Close" : "Open"}
    </button>
  )}
</Toggle>

Spread remaining props to avoid manual forwarding.

function Button({ label, ...rest }) {
  return <button {...rest}>{label}</button>;
}

Notes

Useful Cheatsheetsusefulcheatsheets.com

React Props and Children

Chapter 06 · Page 48

Beginner

React Props and Children

(FAQ)

FAQ

Define the function in the parent component and pass it like any other prop: <Button onClick={handleClick} />. In the child, call it via props.onClick() or destructure it directly.

props.children is implicitly populated by JSX between opening and closing tags, while a named slot prop (e.g., header={<Header />}) must be passed explicitly as an attribute. Use named slots when you need multiple distinct content areas in a component.

Use React Context to provide values deep in the tree without threading props through intermediate components, or restructure with composition — pass the deeply-needed component directly as a prop or children so intermediaries never need to know about it.

Yes: <Component {...props} /> works, but be selective — spreading unknown props onto DOM elements causes warnings and can expose internal state. Destructure what you need and spread only a known rest object, e.g., const { internal, ...rest } = props.

Use destructuring defaults in the function signature: function Card({ title = 'Untitled', size = 'md' }). This is preferred over the legacy Component.defaultProps, which is deprecated in modern React.