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).

CodePudding user response：

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.

CodePudding user response：

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>
  );
}

CodePudding user response：

There are two types state:

1. global state for all
2. 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.