Inverse Data Flow — React.js

One of the most challenging topics I faced in Flatiron School Software Engineering course was the understanding of information flow. When I applied the learning, there were many hiccups in my knowledge as I was not fully grasping the concept, yet. Not to mention when I was in real situations that called for Inverse Data Flow. It was messy & confusing for me at the time but with proper practice and time I can proudly say I am confident in my knowledge of this handy React concept and hope to spread some light on this confusing topic for others.

What exactly does Inverse Data Flow look like?

Inverse Data Flow gives the parent component access to information located in the child component by using a callback function defined within the parent component, passed down to the child, then invoked inside of the child component. We can do this for the parents & children of all components however we cannot pass information from one child to another child, this is something important to remember.

We will go through the steps of Inverse Data Flow by showing examples using a simple “toggle dark mode” feature so lets get started!

  1. Our first order of business is to target the parent component. This will be “App in our case.
  2. After setting state we will create a function called “handleDarkModeClick()”. this will be our callback function that we use later.

3. We will now move onto the second portion of our App component where we actually pass the callback function to our “<Header />” component.

As you can see in the photo below, the “<Header />” component is receiving “onDarkModeClick={handleDarkModeClick}” as props, being passed to our Header component along with our “toggleMode={isDarkMode}” which refers back to our state that we will be able to set in the “<Header />” component.

4. Lets switch to our “<Header />” child component in the file “Header.js”

5. In the child component we will need to do some object destructuring to access the callback function and state.

Notice we are destructuring the objects using curly brackets within the parameters. These will read as props.

6. Great, now that we have successfully moved our callback function & state down, we can begin to inject their values into our return statement that makes up our “<Header />” component.

7. Using our return statement, think about how we can use these objects (as props) to handle the events. For starters we will need to realize that we will need to create a button that can handle the “onDarkModeClick” callback.

8. As we create the button, remember we will want to give this an event to listen for. In our instance we will use the “onClick={}” event and pass the callback function inside of the “onClick” event like so:

<button onClick={onDarkModeClick}>…</button>

And for fun, we will create a ternary expression inside of the onClick button so that when the button is clicked, state will check to see if the state of our toggle switch and read is it “true or false?” then change the buttons text according to the mode we are in from “Dark Mode” to “Light Mode” and vice versa.

9. To create this dynamic ternary expression we will grab the “toggleMode” prop that is used as our state in the “<App />” component to change the values based on which version is clicked.

This will appear between the our button as so:

“{toggleMode ? “Dark” : “Light”} Mode”

When the button is clicked state will not only be changed in the callback function to enable our dark & light mode but willalso update the state of our text value inside the button.

So when we are in dark mode our button text should show “light mode” and when we are in light mode the button will display “dark mode”

Wrapping up:

So, how does this example make the information flow inverse?

When the button in our “Header” component is clicked, it recognizes that there has been a callback function invoked within it that looks up the chain of command to the parent. This sending of “click” event information allows the information of the child to be passed back to our parent callback function to read the data that callback holds.

Thanks for reading my first blog post, I hope this helps and happy coding ❤ !

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store