Inverse Data Flow in detail
Inverse Data Flow in detail

This module looks at Inverse Data Flow in React.

Learning Objectives 

The objectives of this module are to provide you with an understanding of: 

  • Inverse Data Flow 

Intended Audience  

This Learning Path is aimed at all who wish to learn how to use the ReactJS framework.  


It is essential you understand the face of contemporary web development to attend this course. We insist upon JavaScript experience, along with good HTML and CSS skills. 


We welcome all feedback and suggestions - please contact us at to let us know what you think. 


So what's the state of play now? The state of search text and advanced live in the filterable courses table, the values of search text and advanced are updated in the search bar component. The search bar component receives these values as props and props are immutable. React only supports unidirectional data flow from the top of the component tree to the bottom. It appears we have a massive problem here. How do I get data from the search bar component back to the filterable courses table component to update its state? The answer is not as complicated as you might think. 

Thinking about it logically, we pass values as props from parent to child components. We saw when we investigated prop types, that functions can be props too. Herein lies the solution we need. We can pass a change handling function that updates the state in the parent, as a prop to child components. Passing a function as a prop means that it is executed in the component it is declared in. We can just call it from somewhere else and in this case, that somewhere is the search bar component. 

As we call it from the search bar component, we have access to the values in it including rather conveniently for us, any events that are raised. There's the values from the form can seemingly flow back up the tree. You can see that a handle change function has been added to the filterable courses table and this is passed to the search bar as a prop. 

The function expects to receive an event, works out which input fired it, which is easy in our cases we only have two and they are different types and sets the state accordingly using the values supplied with the event. The search bar receives this function as a prop and uses the handle change function as part of the unchanged event handling, passing in the event. The rest of the execution is done in the parent. 

If you look at the component tab in the developer tools, you can see the changes happen. The state is updated as we type in the text box and as we click in the check box, this also changes. The search bar receives this new state as props. And obviously the courses table receives that as well to help it filter. Although we've used this technique for form data, it can be done for any data in the application. It doesn't necessarily need to come from a user event. If you go on to look at state management, there is some hooks and techniques that can make this easier in large applications.

About the Author
Learning Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics