Last week, I was working on a project and wrote the frontend code for togglable, tag component in React that I was particularly proud of. — you know, that feeling when you get something to work in code and you think, "I'm a genius!" Let's build it!
Here's a look at the final product:
It's a list of grade levels K - 12. The user can click on any of these items to toggle them or toggle them on or off.
Cool. So, let's jump into the code!
Since this is a React component, let's start by using Create React App.
This will take a hot minute.
Now, let's go into our new project folder:
and let's start our project:
I'm going to create a file called ToggleTag.js
Within the new file, I'm going to type . This is a snippet that I've set up inside VS Code that will expand to give you a functional react component. I'll include a link to the package in the description below.
We'll name our component ToggleTag and make this a named export.
In fact, one of the things I like to do with all my react components is make them named exports. This consistency helps prevent errors in the future. I don't have to think about whether something is a default export or a named export when everything is a named export. I just know.
I'm going to add the word "Toggle Tag" inside the component, just so we know everything is working.
Now, I'm going to jump over to App.js and delete a lot of the code that's already in there.
I'm going to import the component that we just created and add it it our render.
I'm going to give it a save and a refresh and you should see our text.
Great! It's working.
... and, as a quick aside, if you're wondering where the styling, like the sans-serif font, is coming from, there's an index.css that has some basic default global styles set up.
Let's jump back over to our ToggleTag.js and start stubbing out the HTML.
Usually, when I'm coding, I like to stub out the HTML first and then I can see how my styles are taking effect as I'm writing my CSS.
When you think about each of these toggle tags, it's just like a checkbox. You can toggle them on and off and within a form, they operate as a group — they're all grade levels.
In HTML, we'll say:
I'm going to duplicate our component within App.js a few times so we can get a feel for what we're working with.
If we take a look in the browser, we should see something like this:
Let's start looking at the styling. One of the first things I want to do is get rid of the checkbox. In our App.css we can get rid of all the boilerplate code that was previously there.
Fortunate, for us we can still check and uncheck a checkbox — even with the display turned off, through a label.
Think about it, when you're on a form, you don't necessarily have to click on the checkbox to turn it on and off, you can also click on the text, or the label that accompanies it.
We'll use that to our advantage.
Going back to our HTML, let's add a label around each of our grades. To help separate our text from the checkbox, I'm also going to wrap all the text with a tag.
Now, anytime you're clicking on the text, your toggling the checkbox on and off.
You can double check, by turning off the style. But, you'll see everything is working as expected.
Let's make sure that is not commented out and we can move on by styling the text.
Let's give it a little space from the edge of the screen by adding some padding to . Then, within our styles:
Now, we just need to handle the click, toggled state. Fortunate, for us, you can target that state within CSS:
The only thing is we've hidden the checkbox; we need to target the label next to it. We can actually target the item next to to checkbox with a :
I wanted elementary school, middle school, and high school to all use different colors. The easiest way to do this is to add a class to each label:
You'll notice, I prepended the class with . I don't think you can have a class start with a number, so this solves that issue.
Now, within our CSS we can target those specifically:
We can call these styles our elementary block. We can simply add all the elementary school grades to this block and then create something similar for our middle school and high school:
Before, we get too deep down this road, let's remember that this a React component and can be dynamic.
So, how can we make this dynamic?
Let's look at ToggleTag.js. We want our grade level to be a prop that we can pass in.
We can plug that into our checkbox value and label:
For the , remember we're prepending our class name with . So, we want to use string interpolation to add the dynamically.
Now, we need to pass it in through App.js
One of the things I like to do when I'm coding is just code it out, like we've done here. I try not to worry about writing the DRYest code (Don't Repeat Yourself).
Then, I can start to see some of the patterns emerge. If I find myself rewriting the same block of code over and over again, I know that's a "code smell" and an opportunity to refactor.
I see this within App.js, so let's make this a little cleaner. We could create an object called grades have it loop over all these items. Then, if we need to reuse our list of grades, we don't have to write it again. 🎉
Within App.js we can import our file and use it to list all of our grade levels:
If we give this a save...
It looks right, but there's an error in the console:
When you use it wants you to give each a key so that React can keep up with them. This could be a number or a string. In our case we know that the value, the grade level, is always going to be unique. So, we can use that as our key:
If we give that a save and a refresh, our console error should disappear.
Awesome! So things are shaping up. The one thing we still need to address is the rest of checkbox styles.
If we jump over to App.css, you'll start to see some code smells there too:
We're starting to repeat ourselves. How can we make it better?
This is a great place for CSS variables. The cool part about CSS variables is that they're scoped, meaning we can set them up so they only apply to a specific part of code.
You can define a CSS variable by using . So, within our block, let's create a variable that will only apply to elementary school:
I'm just making up these names, and . They could be whatever you want them to be.
Let's do the same thing for middle school and high school:
For the record, I'm just using the standard color names, but you could also plug your hex colors in.
Now, we need to use these. Let's delete this block that we had created previously:
The same concept still applies, but we're going to have it driven by this block of code that we've already written:
Now, let's plug in our variable names. To do that we use and put the name of the variable inside:
Give that a save...
Receive a weekly email of the Internet's best from articles, to tutorials, to pro tips.