How to pass a state from Child component to Parent Component in react

Question

In my project I have two components, one is App.js that is Parent component, and another one is Child.js this is Child component.

Now In Child.js component I have one button, I have written some code to change background color and text color of Child.js component button. And it's working fine.

Now What I am thinking is In Child.js component before I am clicking the button, the button background color is Yellow and text color is white. Now if I click the button, now the button background color and text color is changed.

Now I have to pass the updated state of the child component to App.js component.

I have to pass an onClick function from child to Parent only when I click the Child component.

This is my code

This is App.js

import React, { useState } from 'react';
import './App.css';
import Child from './Child/Child';

const App = () => {
  return (
    <div>
      <button className='btn btn-danger'>Parent button</button>
      <Child></Child>
    </div>
  )
}

export default App

This is Child.js

import React, { useState } from 'react';
import './Child.css';

const Child = () => {
    const [color, setColor] = useState('yellow');
    const [textColor, setTextColor] = useState('white');
    return (
        <div>
            <button className='btn btn-primary mt-5' style={{ background: color, color: textColor }}
                onClick={() => { setColor("black"); setTextColor('red') }}
            >Child Button</button>
        </div>
    )
}

export default Child

If you feel I am not clear with my doubt please put a comment.

Why are you asking [the same question again](https://stackoverflow.com/q/60758237/1641941)? — HMR, Mar 31 '20 at 16:34
Does this answer your question? [How to pass latest state to a Parent component from Child Component in react](https://stackoverflow.com/questions/60758237/how-to-pass-latest-state-to-a-parent-component-from-child-component-in-react) — HMR, Mar 31 '20 at 16:41

joy08 · Accepted Answer · 2020-03-31T16:24:49.297

2

Pass the function as a prop that will be executed whenever you click the button within Child

https://codesandbox.io/s/access-child-component-method-react-hook-dqy0z

import React, { useState } from "react";
import Child from "./Child";

const Parent = () => {
  const [color, setColor] = useState("");
  const [textColor, setTextColor] = useState("");

  function func(color, textColor) {
    setColor(color);
    setTextColor(textColor);
  }

  return (
    <div>
      <button
        style={{ background: color, color: textColor }}
        className="btn btn-danger"
      >
        Parent button
      </button>
      <Child parentCallback={func} />
    </div>
  );
};

export default Parent;

import React, { useState } from "react";

const Child = ({ parentCallback }) => {
  const [color, setColor] = useState("yellow");
  const [textColor, setTextColor] = useState("white");

  function colorSet() {
    setColor("black");
    setTextColor("red");
    parentCallback("black", "red");
  }

  return (
    <div>
      <button
        className="btn btn-primary mt-5"
        style={{ background: color, color: textColor }}
        onClick={colorSet}
      >
        Child Button
      </button>
    </div>
  );
};

export default Child;

edited Mar 31 '20 at 16:24

answered Mar 31 '20 at 14:34

joy08

9,004
8
38
73

Did this answer your question? – joy08 Mar 31 '20 at 15:08
Hi @sv12 When I click the child button, then child updated state is not passing to Parent component – Cruse Mar 31 '20 at 15:13
In console it is printing, but in output I don't see any change. What I am expecting is Initially Child component button is in the Yellow color background and text color is in white. If Click Child component button, then it's state is changed. When Child component button state is changed then only I have to pass the updated state from Child component to Parent component button. – Cruse Mar 31 '20 at 15:47
you mean parents button color and text to be changed after child's button click? – joy08 Mar 31 '20 at 15:49
Yes after clicking child button, what ever changes happen to child, all changes want to apply to parent component. – Cruse Mar 31 '20 at 15:52
OP already asked [this question](https://stackoverflow.com/q/60758237/1641941) and is ignoring answers so don't waste your time. – HMR Mar 31 '20 at 16:35
Hi @sv12, I am very thankful for you, you helped me a lot. I previously asked this question but I didn't get what I am expecting, Any way you helped me Once again than you very much. – Cruse Mar 31 '20 at 16:46

score 0 · Answer 2 · answered Mar 31 '20 at 14:16

Move this from child to app:

const [color, setColor] = useState('yellow');
const [textColor, setTextColor] = useState('white');

than pass these values and functions to the child:

<Child
  color={color}
  setColor={setColor}
  textColor={textColor}
  setTextColor={setTextColor}
>

Now you have access to all of them in Child via props:

const Child = ({ color, setColor, textColor, setTextColor}) => { ...

In other words remove state (and state updater functions) from child completely.

How to pass a state from Child component to Parent Component in react

2 Answers2