动态更改样式，在 React 中重新渲染时无需重置

Question

I have a page of just a list of divs calling an onClick function. Pretty much this...

<div
            className="square card-container bg-primary"
            points="200"
            id="2"
            onClick={e => select(200, "cat1", e.target.id)}
          >
            <h3 className="text-light">200</h3>
          </div> 

Just 30 of them. With sequential ID's. It's easy enough to push the ID's to a new array when clicked, or to add className once they're clicked, and when I step through the code in Debugger I can see that the class is Added and the styles change, but it is immediately set back to the previous "Un-clicked" className. I was thinking that it might work to make each of these div it's own component and than use useState, but since they're all mostly identical I would still need a key or id, so I'm not sure how I would pass that in to a state and use that conditionally? I'm sorry if this doesn't make sense. Basically I just want to change styles slightly once an item has been selected, without going back to the initial className when it is re-rendered. This is the script that gets called onClick.

const selected = []
  const change = id => {

    selected.push(id);
    console.log(selected);
  };

  const select = (points, cat, id) => {
    let newArr = questions.filter(
      q => q.category === "Sample 1" && q.points === points
    );
    change(id);
    if (newArr.length > 1) {
      let randomOutput = Math.floor(Math.random() * newArr.length);
      console.log(newArr[randomOutput]);
      let out = newArr[randomOutput];
      props.setQuestion({ out });
      props.detail();
      return out;
    } else {
      let out = newArr;
      props.setQuestion({ out });
      props.detail();
      console.log(points, cat);
    }
  }

Answer 1

You need to store a list of selected items using state and make className dynamic

Example: https://jsfiddle.net/78bsnhgw/