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 ♥ https://mentorleo.co

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 ;)

Preparation

You need to initialize your state:

Edit your code so that the background-color depends on this.state.active (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.

Callbacks

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.

Reward

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 ♥ https://mentorleo.co

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.