Tutorial: Build a Toggle Button Using ReactJS Inverse Data Flow in ES6
State, props, callback functions, implicit returns, and all the good stuff.
Introduction
A few weeks ago, Isabel k. lee and I pair-programmed remotely and created a news app called the Hegelian Bagel. The Hegelian Bagel is a single-page application where users are presented with a feed of articles. We developed it using React.js in the frontend and Ruby on Rails in the backend which pulls from the News API.
For this post, I will delve into two primary features of the Hegelian Bagel news app — “tagging” and the COVID toggle. I will talk about the tagging feature a little bit before going into more detail about how to build a toggle button in React using state, props, and inverse data flow between the child and the parent components.
To start off, I want to talk about the tagging feature because I think it’s pretty cool and it explains the name of the app. It requires the same functionalities as the toggle button so if you know one, you’ll know the other. This feature allows users to “tag” news articles. These tags can be specific such as “Black Lives Matter” or more general such as “EU Politics”.
Once this tag is created, it shows up at the top of the shared newsfeed along with other trending tags. New users entering the site can now filter their newsfeed by clicking on the new tags. This creates a categorical and curated user experience for reading the news, hence, “Hegelian”, and since it’s a news app, we expect users to be browsing it in the morning with their coffee and bagel!
Now, I’m going to delve into creating the COVID toggle. At the top of the newsfeed, we built a toggle button that allows the user to filter out all articles related to COVID-19 news. FYI, all of this is done in the frontend using conditional rendering on the DOM so no need for backend tinkering!
Step 0. The setup
In the src folder within your React application, create the toggle button component. In this example, we named our child component, CovidToggle.jsx, and the parent component is our App.js file. We imported CovidToggle.jsx at the top of the App.js file. (I’m linking our GitHub repo here so you can take a look at the code as reference!)
Here’s a side-by-side comparison of our App.js and CovidToggle.jsx components:
(You can opt to create the CovidToggle as a function component, as we won’t be initializing a state, but we used a class component here.)
Step 1. Build out the button in HTML/CSS
First, you’ll need to build out the toggle button itself using HTML/CSS in the return block of the child component. We are using the Semantic React CSS library, but custom HTML/CSS works too.
Once you have the toggle button up and running in your frontend, we can start coding in some functionalities! For reference is what our button looks like so far:
Step 2. Create a controlled component using state and props
In your App.js file, initialize state, create a key with a boolean value, and set that value equal to false. Next, create a method that handles that value. We named our method → handleCovidCheck.
The argument that handleCovidCheck takes in should come from the CovidToggle child component hence the name inputFromChild. The goal here is whenever the user clicks on that toggle button, it should toggle that boolean value in the App component from false to true, or vice versa. The function setState causes React to re-render your application and updates the DOM. It accepts the previous state and current props of your App.js component, using them to calculate and return the next state.
After building them out, pass your method down to the child component as props.
Step 3. Work with props in the child component
Now, add an event listener in your input tag. Buttons in React use onChange (see docs). This event will call on a method that you will create in the child component. We set our onChange event equal to handleToggle. This method in the child component will handle the props passed down from the parent and pass props back up to the parent, creating a controlled component using inverse data flow logic.
As you can see, the method accesses the props handed down to the child by calling on this.props.handleCovidCheckand takes in the “checking” event as the argument. Then evt.target.checked gets passed back up into line 11 of your App.js file as the argument, inputFromChild,toggling the boolean value of the state. If you get all this up and running, you’ve effectively implemented inverse data flow using state and props between parent and child components!
FYI, it’s helpful to, throughout this process as you’re building out a controlled component, console logging the value of your state between your render() and return blocks to get a sense of how your state in App.js is changing.
Step 4. Filtering out your results
Most of the inverse data flow logic has already been implemented. How you wish to proceed from here depends on the nature of your project. For our project, we needed the button to filter out articles. If your project is similar, the same logic applies. You’ll need to decide which array of articles to filter out and which ones to render onto the DOM. To keep it general, we named our method decideWhichArrayToRender.
As you can see, I’ve incorporated other parts into my App.js, including a componentDidMount lifecycle method which pulls in articles from my Rails backend. This lifecycle method populates the empty array in my state in the key of articles.
For the decideWhichArrayToRender method, in line 29, I deconstruct covidCheck and articles out of this.state → this is just a handy tool in ES6 JavaScript to keep your variable names clean.
I commented out some space in lines 31 to 32 for the conditional logic. Depending on the nature of your project, you would use those lines to filter out your large array of articles, items, or results, and pass down this method into the child component that’s responsible for rendering out the list onto the DOM.
I’ll demonstrate what we did here:
… And that’s really all you have to do to create a controlled component in React that toggles and filters using inverse data flow in ES6.
Hope this tutorial was helpful and please reach out if you have any questions, happy developing! ☀️
References:
