React: Data flow

In a React application, data flows from a parent component to a child component, using props as we saw in the previous section:

<WelcomeMessage name={'Flavio'} />

If you pass a function to the child component, you can also change a state variable defined in the parent component from a child component:

<Counter setCount={setCount} count={count} />

This is helpful when the parent component is “in charge” of the state variable.

Inside the Counter component, we can now call the setCount prop and call it to update the count state in the parent component when something happens:

const Counter = ({ count, setCount }) => {
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => **setCount(count + 1)**}>Click me</button>
    </div>
  )
}

Here’s a full example:

import { useState } from 'react'

const Counter = ({ count, setCount }) => {
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

function App() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <Counter setCount={setCount} count={count} />
    </div>
  )
}

export default App

You need to know that there are more advanced ways to manage data.

Starting from the Context API, but also libraries like Jotai and Easy Peasy.

But many times using those 2 ways I just explained is the perfect, simple solution you need.

Lessons in this unit:

0: Introduction
1: DEMO Setting up a React project with Vite
2: React Components
3: Introduction to JSX
4: Using JSX to compose UI
5: The difference between JSX and HTML
6: Embedding JavaScript in JSX
7: Handling user events
8: Managing state
9: Component props
10: ▶︎ Data flow
11: Lifecycle events
12: Managing forms in React
13: Install the React Developer Tools
14: DEMO Installing Tailwind CSS in a React app
15: DEMO Build a counter in React
Want to learn more? Check out our courses