I am trying to build a traffic light using ReactJS. I need the traffic light to go in the order red, yellow, green, red, yellow, green, etc. My current code gives me a different pattern. I don't know quite how to work with setInterval on this one and I could really use some help. I looked at a solution to the same problem by CarterTsai on CodePen, but I was neither able to understand most of his code, nor convert it into a stackblitz-friendly format to adapt it to my code. Does anyone have any answers? Any help is appreciated! It would also be great if anyone could provide a solution with two components - one that changes the traffic light state, and another that utilizes that state shows the actual traffic light(that was the requirement for my homework).
Here is a link to view my project on stackblitz: https://stackblitz.com/edit/react-eqkhd7?file=src/style.css
my code in App.js :
import React from 'react';
import './style.css';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: '',
color2: '',
color3: ''
};
setInterval(this.changeColor1.bind(this), 2000);
setInterval(this.changeColor2.bind(this), 4000);
setInterval(this.changeColor3.bind(this), 6000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
};
render() {
return (
<div>
<span style={{ backgroundColor: this.state.color1 }} class="circle" />
<p />
<span style={{ backgroundColor: this.state.color2 }} class="circle" />
<p />
<span style={{ backgroundColor: this.state.color3 }} class="circle" />
</div>
);
}
}
style.css :
h1,
p {
font-family: Lato;
}
.circle {
margin: auto;
height: 100px;
width: 100px;
border: 5px black solid;
border-radius: 50%;
display: block;
}
index.js :
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));
You can do this using setTimeout
and call the other traffic light function after the current traffic light execution.
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
color1: '',
color2: '',
color3: ''
};
setTimeout(this.changeColor1, 2000);
}
changeColor1 = () => {
this.setState({ color1: 'red', color2: '', color3: '' });
setTimeout(this.changeColor2, 2000);
};
changeColor2 = () => {
this.setState({ color1: '', color2: 'yellow', color3: '' });
setTimeout(this.changeColor3, 2000);
};
changeColor3 = () => {
this.setState({ color1: '', color2: '', color3: 'green' });
setTimeout(this.changeColor1, 2000);
};
Here is the working fiddle