I have a bunch of buttons in my app and I change their className when they are clicked ("myButton" or "activeMyButton"). Whenever I click on a non-active button, it's not re-rendering. But when I click on an active button, it's re-rendering (and if I clicked on non-active buttons before, they're re-rendering with this one). It doesn't make any sense to me. Here's my code : the button component

export default function MyButton({
  buttonFunction,
  buttonParameter,
  activeButton,
}) {
  return (
    <button
      className={activeButton ? "myButton activeMyButton" : "myButton"}
      onClick={() => {
        buttonFunction(buttonParameter);
      }}
    >
      {buttonParameter}
    </button>
  );
}

And here's the parent component :

export default function Mathoperators() {
  const [activeOperators, setActiveOperators] = useState([" "]);

  const handlingOperators = (operatorInput) => {
    let stockOperators = activeOperators;
    if (
      stockOperators.length > 0 &&
      stockOperators.some((operator) => {
        return operator === operatorInput;
      })
    ) {
      stockOperators = stockOperators.filter((operator) => {
        return operator !== operatorInput;
      });
      setActiveOperators(stockOperators);
    } else {
      stockOperators.push(operatorInput);
      setActiveOperators(stockOperators);
    }
  };

  const handlingOperatorButtonClass = (operatorInput) => {
    return activeOperators.some((operator) => {
      return operator === operatorInput;
    });
  };

  return (
    <section className="optionsContainer">
      <MyButton
        buttonParameter={!mathPlus}
        buttonFunction={setMathPlus}
        activeButton={mathPlus}
      />
      <MyButton
        buttonParameter="−"
        buttonFunction={handlingOperators}
        activeButton={handlingOperatorButtonClass("−")}
      />
      <MyButton
        buttonParameter="×"
        buttonFunction={handlingOperators}
        activeButton={handlingOperatorButtonClass("×")}
      />
      <MyButton
        buttonParameter="÷"
        buttonFunction={handlingOperators}
        activeButton={handlingOperatorButtonClass("÷")}
      />
    </section>
  );
}

If I switch from this array state to four boolean states, everything is working fine. But I'd like to know if I'm doing something wrong with this version. Thanks !

CodePudding user response：

When you write let stockOperators = activeOperators you're not creating a new array, you're just creating a variable that points to the activeOperators state. Thus stockOperators.push(operatorInput) actually mutates your state directly and that creates this weird behavior that you're seeing.

let stockOperators = [...activeOperators] should fix it!

CodePudding user response：

change it to let stockOperators = [...activeOperators];

this happened because when you do let stockOperators = activeOperators;

it will copy the reference to the value and change it mean you change the start itself so the when you put it in the setState it will looks like its never been changed