React : why are my components not re-rendering when controlled by an array state?

Question

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 !

Daniel Baldi · Accepted Answer · 2021-11-17 20:01:55Z

2

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!

answered Nov 17, 2021 at 20:01

Daniel Baldi

9205 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TalOrlanczyk · Accepted Answer · 2021-11-17 20:04:36Z

2

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

answered Nov 17, 2021 at 20:04

TalOrlanczyk

1,2139 silver badges21 bronze badges

Collectives™ on Stack Overflow

React : why are my components not re-rendering when controlled by an array state?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related