How to change the state of some component with setInterval()? - reactjs

Question

How can I make so that every 2 seconds my state randomly changes? For now it changes in console log but it doesn't render it. The active state change is supposed to change the Switch component visually. For example, if I exclude boxList[0].machines[0].switches[0].active = true it changes correctly but when it's within setInterval() it doesn't change anything.
Example:
App.js
var boxList= [
{id: 1, machines:[
{id: 1, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
{id: 2, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
{id: 3, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
{id: 4, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
]},
{id: 2, machines:[
{id: 1, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
{id: 2, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
{id: 3, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
{id: 4, switches:[{id: 1, active: false}, {id: 2, active: false}, {id: 3, active: false}, {id: 4, active: false}]},
]},
]}];
class App extends React.Component {
render() {
setInterval(() => {
var x = [0,1].sample()
var x = [0,1].sample()
var z = [0,1,2,3].sample()
var info = [true, false].sample()
boxList[x].machines[y].switches[z].active = info;
}, 2000);
var boxes = boxList.map((box) =>
<Box key={box.id} box_id={box.id} machines={box.machines} />);
return (
<div>
{boxes}
</div>
);
}
}

Answer 1

Your component doesn't have state, it accesses some globally available data. However, the actual problem is that you are never telling the component to rerender. The component doesn't know that the data is changed, hence it doesn't update.
If you don't want to move the data into the component's state, you can use forceUpdate to force a rerender.
But: The render method should never directly or indirectly goes another render. Having the setInterval call in render doesn't make much sense either, since this would create a new interval every time the component renders.
Instead, make use of the lifecycle methods and create the interval after the component mounted. Don't forget to clear the interval when the component is destroyed, too!
class App extends React.Component {
componentDidMount() {
this._interval = setInterval(() => {
// ...
this.forceUpdate();
}, 2000);
}
componentWillUnmount() {
clearInterval(this._interval);
}
render() {
// ...
}
}