How can I create a global array in react? When I do separate operations for each index, I want them to save them in a single array

Admin 1
Viewed 162

I have more than one button. It changes color when I press these buttons. First I press the button numbered 1 and it turns green. Then I press the button number 2 and it turns green. Then when I press the button number 2, the color turns red. The code for this is below.

Test.jsx:


const Test = () => {
return (
  <Row>
      <Col md={12} xs={16}>
         <Card
         ctTableFullWidth
         ctTableResponsive
         content={
         <div>
         {lightAPI.map((item) => {
         return <Button key={item.id} index={item.id} value={item.id} 
         lightAPI={item} />;
         })}
         </div>
         }
         />
      </Col>
   </Row>
);

Button.jsx

export default function Button({ lightAPI, index }) {
        const [lightList, setLightList] = useState([]);
        const [buttonColor, setButtonColor] = useState(green);

        function handleColorChange(e) {
        const newButton = e.target.style.backgroundColor;
        const newColor = buttonColor === green ? red : green;
        setButtonColor(newColor);
        if (newColor === green) {
            setLightList([...lightList, lightAPI.id])
        }
        else{
        //remove list
        }
    }

return (
        <div>
            <button
                style={{ backgroundColor: buttonColor }}
                color={buttonColor}
                onClick={handleColorChange}
                index={index}
                ></button>
        </div>                  
    );

I want to send the numbers of the green buttons to the API. For this, I want to add the numbers of the green buttons to a list as lightList. When the buttons are red, I should be able to remove them from this list.

When I do the add to list operation, it creates a different list for each number. For example, when I press 1, lightList [1] is created as [1] when I press 2, [2] and when I press 1 again, it becomes [1,1]. I want it to be in the form of lightList [1,2,7,3]. Each index creates a separate list. How can I edit this?

When I click 2, if it is green, it adds it to the list and the list looks like this [2]. When I click on 3, if it is green, the list looks like this [3]. If it is green when I click on 2 and 3, I want it to look like this [2,3].

use-state react-redux react-hooks reactjs javascript
1 Answers

You need to check if the ID exists before adding it to the list. I re-wrote your code to implement this check

Test Component

const Test = () => {
  const [lightList, setLightList] = useState([]);

  return (
    <Row>
      <Col md={12} xs={16}>
        <Card
          ctTableFullWidth
          ctTableResponsive
          content={
            <div>
              {lightAPI.map((item) => {
                return <Button key={item.id} index={item.id} value={item.id}
                  lightAPI={item} lightList={lightList} setLightList={setLightList} />;
              })}
            </div>
          }
        />
      </Col>
    </Row>
  );
}

Button Component

export default function Button({ lightAPI, index, lightList, setLightList }) {
  const [buttonColor, setButtonColor] = useState(green);

  const handleColorChange = (e)=> {
    const newButton = e.target.style.backgroundColor;
    const newColor = buttonColor === green ? red : green;
    setButtonColor(newColor);
    if (newColor === green) {
      if (!lightList.includes(lightAPI.id)) {
        // add the id only if it does not existss in lightList
        setLightList([...lightList, lightAPI.id])
      }
    }
    else {
      if(lightList.includes(lightAPI.id)){
        // filter out the ID to remove
        const newList = lightList.filter((lightID) => lightID !== lightAPI.id)
        setLightList(newList)
      }
    }
  }

  return (
    <div>
      <button
        style={{ backgroundColor: buttonColor }}
        color={buttonColor}
        onClick={handleColorChange}
        index={index}
      ></button>
    </div>
  );
}
user_107732060
Related