diff --git a/Programming_Languages/Frameworks/React/Hooks/Child_to_parent_data_flow.md b/Programming_Languages/Frameworks/React/Hooks/Child_to_parent_data_flow.md index 93a5e7a..081a9ec 100644 --- a/Programming_Languages/Frameworks/React/Hooks/Child_to_parent_data_flow.md +++ b/Programming_Languages/Frameworks/React/Hooks/Child_to_parent_data_flow.md @@ -12,3 +12,25 @@ Despite React having a uni-directional, downwards data-flow, it is sometimes nec For the example we will use the standard click incrementer. We have a counter on the parent that is updated in response to a click event in the child component. + +Our parent component is `App` and the child component is `Child` + +```jsx +export default function App() { + const [count, setCount] = useState(0); + return ( + <> +

{count}

+ + + ); +} + +const Child = ({ count, setCount }) => { + return ; +}; +``` + +So the overall state and updater function exists on the parent. The child is able to access this state by virtue of receiving `{count, setCount}` as props. It can therefore manipulate this state and have it be reflected in the parent. + +It is not necessary to pass the state variable every time. You could just pass the updater. We have passed the `count` variable here because the child needs access to the current value, in order to be able to increment it.