ginysp / exercise-traffic-light-react

Traffic Light with React

Sometimes we want to create components with an internal state that changes overtime, imagine a traffic light that changes color every 3 seconds, for that we normally will make a variable color and set it to a default color:

let color = "blue";

But we want our component to re-render and change the website HTML every time the variable color changes, that's why we use hooks:

//        ↓ variable name             ↓ default value
const [ color, setColor] = useState("red");
//               ⬆ function to change the color

From now one, every time we use the function setColor to change the variable color, the component will re-render and the entire traffic light HTML will be updated with the new color.

You can read more about hooks here.

💻 Installation

Start a new react project.

📝 Instructions

Let's simulate a traffic light like this one.

The light has to glow when clicked.

• The whole purpose of the component is displaying a traffic light with red, yellow and green lights.
• When any light is clicked (selected) it has to glow, but the other lights have to stop glowing.
• The component must have a hooked state variable that tracks the color:

const [ color, setColor] = useState("red");

• Use the setColor function to change the color an the component will automatically re-render (because it's hooked with useState).

• Use the ReactDOM.render to render the component into the DOM like this

ReactDOM.render(<TrafficLight />, document.querySelector('#app'));