React counter not changing on the right interval

Question

I am doing a small project with react lifecycles and I am attempting to change all box colors randomly every time the counter reaches a number divisible by 5 however, the boxes only change when the number is divisible by 10.

App.js:

import React from 'react';
import './App.css';
import Counter from "./components/Counter";
import Box from "./components/Box";

function App() {
    const randomColor = [
        "#0d0d8c",
        "#a41313",
        "#064826",
        "#996e00"
    ];

    const [number, setNumber] = React.useState(0);
    const [boxes, setBoxes] = React.useState([]);
    const [color, setColor] = React.useState('red');
    const [change, setChange] = React.useState(false);

    let box = boxes.map((obj, idx) =>
        <Box key={idx} color={color} />
    );

    let getColor = () => {
        if (boxes.length % 5 === 0) {
            let rand = Math.floor(Math.random() * randomColor.length);
            setColor(randomColor[rand]);
            return randomColor[rand];
        }
        return color;
    };

    React.useEffect(() => {
        if (boxes.length % 5 === 0) {
            let rand = Math.floor(Math.random() * randomColor.length);
            setColor(randomColor[rand]);
            return randomColor[rand];
        }
        return color;
    }, [color])

        React.useEffect(() => {
            if (number % 2 === 0) {
                let newBoxList = [...boxes];
                newBoxList.push({color: getColor()});
                setBoxes(newBoxList);
            }
        }, [number,change]);


        let reset = () => {
            setNumber(0);
            setBoxes([]);
            setChange(true);
        };

        return (
            <div className="App">
                <button onClick={() => setNumber(number + 1)}>Increase</button>
                <button onClick={reset}>reset</button>
                <Counter count={number}/>
                <div className="boxes">{box}</div>
            </div>
        );
    }

export default App;

deployed site: https://priceless-spence-9ae99a.netlify.app/

Were you able to get this resolved? – qslabs Mar 07 '22 at 13:31 — qslabs, Mar 07 '22 at 13:31

qslabs · Answer 1 · 2022-03-02T19:27:03.587

0

I think the culprit is your useEffect() hook listening to number. Whenever number is even you are copying the existing contents of boxes and then adding new boxes to the existing boxes; you are not actually updating all boxes in the array. It seems your desire is to have all of those boxes, existing and new, be updated to a new color so you'll need to iterate through the array and update each.

I think it comes down to the fact that you are assigning the return value of getColor to your new boxes rather than the value of local state color.

edited Mar 02 '22 at 19:27

answered Mar 02 '22 at 19:17

qslabs

406
4
8

Alternatively, you could move the tracking of color outside of `boxes` and instead reference it from local state whenever doing an in-line map of `boxes` in your return statement. That way every box is referencing the value in local state, you won't need to worry about updating each box! – qslabs Mar 02 '22 at 19:22

React counter not changing on the right interval

1 Answers1