Understanding unidirectional data flow in React
Getting the hang of unidirectional data flow in React is something that took me awhile to wrap my head around, so here is a generic example loosely inspired by a voting app I am working on as a volunteer project:
Here you’ll see a gist that outlines the parent component of an app. The parent component is responsible for storing the state (in this case, the number of votes). The parent component passes this state information down to its child components, CandidateList and Candidate, via explicit props. The parent component also defines a function, handleVote, which is passed down as a prop to its children (yes, you can pass functions as props also!). The child components will then define a function callback that bubbles up to the parent to let it know when a user has voted for a candidate.
Here is a gist outlining one of the children components for our fictional React app. This component is called CandidateList and should show the user a list of candidates for a local organization’s election. Because I wanted to merely illustrate the general principles involved in unidirectional data binding in React, in this example we’ll pretend that there is only one candidate running for election unopposed so our state in our parent component can be relatively simple and have only two properties (candidate and votes) and pass this down to the CandidateList child component.
As you can see from the above example, the parent component manages the state and keeps track of its data and also passes down the ability to vote for a given candidate (in this case, Sam Bee) via a prop bound to an onClick handler. Hopefully this example is somewhat illuminating for those who were as new to one-way data binding as I was when I first began developing with React.