Basic Data Flow in React!

We are going to take a look at how data is passed along when using react. The key elements we will need to know when looking at this are: a component, a parent component/child component, props, callback functions, and then useState.

The first thing to look at is a component and how there are child and parent components. A component is where you write your code of what you want your website/app to do and also display. When a component passes an argument (prop) down to another component, that first component passing down is the parent and the component receiving the prop is the child. That is how a parent component can communicate with a child component. So if you have a component called "Today" and all that component is responsible for is getting the current year and displaying it. Within the Today component, we can assign that data to the variable currentYear. When we are done displaying that current year in the Today component, we can then take that variable and pass it down as a prop to another component called Future.

Today Component (parent)

import react from "react"
import Future from "./Future"

function Today ()
{
  let currentDate = new Date()
  let currentYear = currentDate.getFullYear()

  return (
    <div>
      <div>
        The current year is {currentYear}!
      </div>
      <Future currentYear={currentYear} />
    </div>
  )
}

export default Today

We are only going to use this component called Future to display how many years until the year 2030. Because this component received the current year as a prop from the component named Today, it does not need to redo the steps to get that information. With this being done, we have our established parent component (Today) and our established child component (Future).

Future Component (child)

import react from "react"

function Future ({ currentYear })
{
  let yearsLeft = 2030 - currentYear

  return (
    <div>
      There are {yearsLeft} years left until 2030!
    </div>
  )
}

export default Future

This passing of data via props from the Today component to the Future component is an example of how the parent component can communicate to the child component. The child component can in fact communicate back to the parent component, but not in the same way even though props are still used as that is the connection between the components. Let's take a look at the components again, but the code will be a little different.

Today Component (parent)(updated)

import react, {useState} from "react"
import Future from "./Future"

function Today ()
{
  let currentDate = new Date()
  let currentYear = currentDate.getFullYear()
  const [styling, setStyling] = useState(true)

  function changeStyling()
  {
    setStyling(!styling)
  }

  return (
    <div className={(styling ? "fun" : "professional")}>
      <div>
        The current year is {currentYear}!
      </div>
      <Future currentYear={currentYear} handleClick= 
      {changeStyling} styling={styling} />
    </div>
  )
}

export default Today

Future Component (child)(updated)

import react from "react"

function Future ({ currentYear, handleClick, styling })
{
  let yearsLeft = 2030 - currentYear

  return (
    <div className ={(styling ? "fun" : "professional")}>
      <div>
        There are {yearsLeft} years left until 2030!
      </div>
      <button onClick={handleClick}>
        Click to change styling!
      </button>
    </div>
  )
}

export default Future

CSS to show styling tied to class name

.fun {
color: #DE854B;
font-family: Balgin;

.professional {
color: #000000;
font-family: Arial;

As you can see, we did change a little bit in both components. Let's start with the parent component. We added the hook useState in there and established the state and the function that will update that state. We also added a class to the main div in the return statement that is dependent on our state. We then passed the function changeStyling, which only changes the value of our styling state via setStyling, and the state styling down to the child component as props. Just like how we previously did with the currentYear variable.

Now in our child component, all we really did was add that same class to the main div in the return and then add a button. When you look at the button tag, you will notice that one of the props we passed down is here and that is the handleClick prop. This is the callback function that is tied to our changeStyling function in the parent component. So our child component is passing this information that the button was clicked back to our parent component via callback function to change the styling value and therefore our page's styling since it would be tied to our class names for our div tags. This is an example of how the child component can still communicate to the parent component. This is just one basic example of how the components can use this communication.