Mentor Léo: Play with React state (Week 2 — Day 3)

Work from anywhere, be a web developer
Learn by doing, become a Hero developer

This series is about teaching Léo to become a professional developer from scratch. Léo can be any of you, desiring to learn and grow. Apply here, it will always be free ♥

See the story of the project on medium

React state

Props are meant to be passed from component to sub-components. See again Day 2 if you missed it !

But how do we keep changing information inside our component ? Answer: React state.

Let’s scope the exercise so that you have the goal in mind.

We want to toggle the Labels to disable them / reactivate them. For example I have a “React” label which is blue. If I click on it, I want to make it look like it’s disabled (by changing the color into gray). But if I click on it again, I want it back it blue.

In the last days of this week 2, we will trigger a new fetch of the job offers based on the labels activated. Looks cool right ? Let’s go ;)


You need to initialize your state:

Edit your code so that the background-color depends on (that’s how you access the state, and it’s READ-ONLY). We’ll use this.setState({…}) to edit the state in the next exercise.
Try setting manually “active: false” to see if the colors are right (true: the supposed color | false: gray). Don’t forget to revert to “active: true” for the next exercises.

Life cycles

Okay well, tough topic. I won’t explain everything, they have an awesome doc on that: link here.

In a nutshell, your component lives like this:

  • Getting props
  • Initializing state
  • ComponentWillMount event
  • Rendering
  • ComponentDidMount event
  • calling a this.setState({…});
  • Re-rendering
  • etc

The important thing here is that if you modify the state of your component, you will tell him to re-render. And that’s what we want: when we toggle that damn button, we want its background-color to be changed.


Okay we have almost everything, we just need to tell React that when the button is clicked, then change the state (and then it will re-render itself).
That’s where callbacks enter the game :D

Add a property “onClick={this.toggleButton}” to the container of your label, like this:

Now we have to implement the toggleLabel function :D

Well it’s almost perfect ! Do we miss a detail ? Yes. When you pass your mouse hover your label, it doesn’t show you can click it. It’s pretty bad behaviour in fact, your visitors won’t know they can click them !

Instead of exposing a <div> container in the render function, use a <a> which is meant to handle links and accessibility behaviour.

Exercise: Using CSS, make the background color change when you pass the mouse over it. This will ultimately tell your user that this component is clickable #UX.


You did well on React, there’s a lot to learn but you’ll make it !
To make you rest, I’ll give you a super fun thing to do ;)

Animate the toggling color of the Label \o/

I leave you alone on this as it is really easy and funny !

In Day 4, we will see how to architecture our React app properly.

→ click here to go to Day 4 👍

Call to action

Join us ! We are creating a community of motivated Léos helping each other. Apply here, it will always be free ♥

Like what you read? Give Damien BRY a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.