Pass prop from parent to child in React

Question

I have the following page:

import ParentComponent from '../components/ParentComponent';
import ChildComponent from '../components/ChildComponent';

const Page = () => {
  return (
    <ParentComponent color="white">
      <ChildComponent />
    </ParentComponent>
  );

}

export default Page;

Is there a way to access the color prop on the ParentComponent from inside the ChildComponent so I can manipulate some things based on if it's set to 'white'?

I haven't tried anything yet, please help!

You can use [states](https://reactjs.org/docs/hooks-state.html) or even global states ([context](https://reactjs.org/docs/context.html) or [redux](https://redux-toolkit.js.org/) ) to pass down the values to child components — Kaung Khant Zaw, Apr 03 '22 at 08:23

score 1 · Answer 1 · edited Apr 05 '22 at 01:16

1

You can use Context in React. Context provides a way to pass data through the component tree without having to pass props down manually at every level.

More information

edited Apr 05 '22 at 01:16

vahid tajari

1,163
10
20

answered Apr 03 '22 at 08:22

nong tran

11
2

score 0 · Answer 2 · answered Apr 03 '22 at 08:21

How about using a state to store the color and pass it to both components?

import React, { useState } from 'react';
import ParentComponent from '../components/ParentComponent';
import ChildComponent from '../components/ChildComponent';

const Page = () => {
  const [color, setColor] = useState('white')
  return (
    <ParentComponent color={color}>
      <ChildComponent color={color} />
    </ParentComponent>
  );

}

export default Page;

score 0 · Answer 3 · answered Apr 03 '22 at 08:31

In your parent component you can clone your children and add a property to them like this:

  {React.Children.map(children, (child) => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, { color });
    }
  })}

Demo: https://stackblitz.com/edit/react-6p9qfb?file=src%2FApp.js

More info: How to pass props to {this.props.children}

Pass prop from parent to child in React

3 Answers3