Last Sync: 2022-09-29 15:00:05

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 (
+    <>
+      <p>{count}</p>
+      <Child count={count} setCount={setCount} />
+    </>
+  );
+}
+
+const Child = ({ count, setCount }) => {
+  return <button onClick={() => setCount(count + 1)}>Increment</button>;
+};
+```
+
+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.