How to I save the state of an array while another setState function is being called?

Question

I'm trying to create a ButtonGroup, multiple buttons can be clicked at the same time. When a button is clicked, it would change its color, and the value of the button will be added to an array, such that if three buttons are clicked, the array would hold the value of all three buttons.

This is my current implementation:

import React, { useState } from "react";
import { Button, ButtonGroup, Box } from "@mui/material";

export default function SystemsButtonGroup() {

    const services = ["A", "B", "C"];

    const [flag0, setFlag0] = useState(true);
    const [flag1, setFlag1] = useState(true);
    const [flag2, setFlag2] = useState(true);

    const clickedServices = [];

    const flagChecker = (serviceValue) => {
        if (serviceValue == services[0]) {
            setFlag0(!flag0)
        } else if (serviceValue == services[1]) {
            setFlag1(!flag1)
        } else {
            setFlag2(!flag2)
        }
    }

    const clickHandler = (event) => {
        let serviceValue = event.target.value
        flagChecker(serviceValue)
        console.log(serviceValue)
        if (clickedServices.includes(serviceValue)) {
            clickedServices.splice(clickedServices.indexOf(serviceValue), 1)
        } else {
            clickedServices.push(serviceValue)
        }
        console.log(clickedServices)
    };
    
    return (
        <Box
            sx={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
            }}>
            <ButtonGroup variant="outlined" size="large">
                <Button value = {services[0]} onClick={clickHandler} color={flag0 ? "primary" : "secondary"}>{services[0]}</Button>
                <Button value = {services[1]} onClick={clickHandler} color={flag1 ? "primary" : "secondary"}>{services[1]}</Button>
                <Button value = {services[2]} onClick={clickHandler} color={flag2 ? "primary" : "secondary"}>{services[2]}</Button>
            </ButtonGroup>
        </Box>
    );
}

I've managed to implement the changing of the color of the buttons, but I'm unable to get more than one value in my array. Whenever I click on a button, the array would just have the value of the most recent button clicked, even if I had all three buttons clicked. I think the problem lies in the state of the array not being saved as the other setState functions are invoked?

Where in my code can I implement the saving of the array state?

Thanks in advance!

Answer 1

If I understand your issue correctly, I think it may come from your high level approach. You have three separate states, when a single array holding the references you want would be much more pleasant to work with.

Then you don't need a separate array to store the values either, you have it in state ^^

Something like this? https://codesandbox.io/s/loving-stallman-nj1n0n?file=/src/App.js