How to get values from a child component in React?

Question

Could you tell me please, how can I duplicate the values of the states value from the child component Child to parent Parent. The child component implements the increment and decrement of the state on the buttons. The value should also be displayed in Parent. Thanks!

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

const Parent = () => {
    const [value, setValue] = useState(0);
    return (
        <>
            <span>{value}</span>
            <Child data={value} />
        </>
    );
}
export default Parent;

import React, {useState} from 'react';

const Child = ({data}) => {
    const [value, setValue] = useState(data);

    const increment = () => {
        setValue(prevState => prevState + 1)
    };

    const decrement = () => {
        setValue(prevState => prevState - 1)
    };

    return (
        <>
            <button onClick={increment}>+</button>
            <span>{value}</span>
            <button onClick={decrement}>-</button>
        </>
    );
};
export default Child;

You probably will need to lift the state up if you need it in the parent component. — evolutionxbox, Aug 21 '21 at 19:49

score 0 · Answer 1 · answered Aug 21 '21 at 19:55

The easiest way is to define the state in the parent component and then pass the value and the setValue as props to the child component.

<Child value={value} setValue={setValue} />

Then you just call the setValue from the props object to set the state.

score 0 · Answer 2 · answered Aug 21 '21 at 19:58

0

You can do this by either passing down a method from the parent to child as a prop or you can manage the state outside using redux. Furthermore, follow this discussion to get a better understanding.

answered Aug 21 '21 at 19:58

Harsh Gaur

39
2

How to get values from a child component in React?

2 Answers2