How do I get a state variable from child to parent?

Question

I am learning React.
I have Component structure like this -

index.js

import React from "react";
import Button from "./Button/Button"

export default function Index() {

  return (
    <>
    <Button />
    <div>Value of flag in Index.js = {}</div>
    </>
  );
}

Button.js

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

export default function Button(props) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(!flag);   
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

My question is "How do I get flag value from Button.js to index.js" ? (child to parent).

take a look here https://stackoverflow.com/questions/27864951/how-to-access-a-childs-state-in-react — Zia Yamin, Oct 16 '21 at 04:13
Does this answer your question? [Pass props to parent component in React.js](https://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js) — jsonderulo, Oct 16 '21 at 04:17
Does this answer your question? [How to access a child's state in React](https://stackoverflow.com/questions/27864951/how-to-access-a-childs-state-in-react) — Noam Yizraeli, Oct 16 '21 at 12:18

score 2 · Accepted Answer · answered Oct 16 '21 at 04:20

2

1) You can lift state in parent component and pass state and handler as a prop to children.

Note: This is will work because you need flag in the JSX, But if you will pass event handler as a prop in the child component then you have to invoke the handler to get the value. So Either lift the state or use Redux

Live Demo

App.js

const App = () => {
    const [flag, setFlag] = useState( true );
    return (
        <>
            <Button flag={flag} setFlag={setFlag} />
            <div>Value of flag in Index.js = { flag.toString() }</div>
        </>
    );
};

Button.js

export default function Button({ flag, setFlag }) {
    
    const clickHandler = () => {
        setFlag(oldFlag => !oldFlag);
    };

    return (
        <div className="btn" onClick={clickHandler}>
            Value of flag in Button.js = {flag.toString()}
        </div>
    );
}

2) You can pass handler as a prop in child component as shown in the Harsh Patel answer

3) You can use state management tool i.e. Redux.

answered Oct 16 '21 at 04:20

DecPK

24,537
6
26
42

How do I print `flag` in index.js inside `
Value of flag in Index.js = {}
` if I use @Harsh Patel answer ? – diana Oct 16 '21 at 04:41
You can't without introducing again state, Because you have to invoke the `getFlagValue` function to print the value. But you won't get the value. You can create a state here in the parent component and then change it as soon as the `getFlagValue` invoked. But that I won't recommend because we are complicating the case here. – DecPK Oct 16 '21 at 04:47
Best option would be to lift that state in the parent. – DecPK Oct 16 '21 at 04:52
Yes, you are right, If I use another state in index.js, then both states will not be synced together. So for now I am going to lift the state up to index.js. I will also learn REDUX. How much time it will take to learn Redux If I know the basics of react ? – diana Oct 16 '21 at 04:53
Depend on yourself, Sometimes it takes a week, Some learn quickly and start in a day. Just give it a shot and it would be worth it. – DecPK Oct 16 '21 at 04:54

score 0 · Answer 2 · answered Oct 16 '21 at 04:12

You can send a value by method, refer to this:

index.js

import React from "react";
import Button from "./Button/Button"

export default function Index() {

  let getFlagValue = (flag) => {
    //here you'll get a flag value
    console.log(flag)
  }

  return (
    <>
    <Button sendFlagValue=(getFlagValue)/>
    <div>Value of flag in Index.js = {}</div>
    </>
  );
}

Button.js

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

export default function Button(sendFlagValue) {
  const [flag, setFlag] = useState(true);
  const clickHandler = () => {
      setFlag(!flag);   
      sendFlagValue(flag)
  };

  return (
      <div className="btn" onClick={clickHandler}>
        Value of flag in Button.js = {flag.toString()}
      </div>
  );
}

I want to print flag value in index.js `
Value of flag in Index.js = {}
` also. How to do this ? — diana, Oct 16 '21 at 04:35

score 0 · Answer 3 · answered Oct 16 '21 at 04:28

There are two types state:

global state for all
private state for component

For starter, you must obey some policies, not try abuse state, otherwise you will have some troubles.

For global STATE, you can use Redux or dva or umijs.

For private STATE, you seems already known.

How do I get a state variable from child to parent?

3 Answers3