/Javascript/React/React hooks update parent state from child

React hooks update parent state from child

const EnhancedTable = ({ parentCallback }) => {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => {
            const newValue = count + 1;
            setCount(newValue);
            parentCallback(newValue);
        }}>
             Click me {count}
        </button>
    )
};

class PageComponent extends React.Component { 
    callback = (count) => {
        // do something with value in parent component, like save to state
    }

    render() {
        return (
            <div className="App">
                <EnhancedTable parentCallback={this.callback} />         
                <h2>count 0</h2>
                (count should be updated from child)
            </div>
        )
    }
}

Source: stackoverflow.com

Similar codes

5 votes366 views1 answer
Laravel react
Javascript React
0 vote331 views1 answer
React-i18next
Javascript React
2 votes383 views2 answers
Capture enter button react input
Javascript React
1 vote369 views2 answers
React-native-screens
Javascript React
0 vote350 views1 answer
Pass params axios get react
Javascript React
0 vote358 views1 answer
React native cors origin
Javascript React
10 votes310 views1 answer
That is neither a react function component nor a custom react hook function. react component names must start with an uppercase letter. react hook names must start with the word "use"
Javascript React
0 vote278 views1 answer
React state scope
Javascript React
4 votes325 views1 answer
On window resize react
Javascript React
0 vote376 views1 answer
Align left text in reactstrap
Javascript React