Применение условного стиля при нажатии на отдельный элемент в коллекции

Question

У меня есть функциональный компонент, который отображает набор значений и отображает ряд элементов. Я хочу прикрепить обработчик кликов к каждому из них, который изменяет класс только по нажатому элементу. Теперь мой мозг перегружен, и мое текущее решение добавляет класс ко всем визуализированным элементам (ну, конечно. Он внутри al oop):

function AvailableSizes(props) {
  const [active, setActive] = useState(false);

  return (
    <div className="sizes">
      <h4>Available Sizes</h4>
      <div className="d-flex mb-4 flex-wrap flex-row">
        {props.sizes.map(size => {
          return (
            <div
              onClick={() => setActive(!active)}
              key={size}
              className={`size m-2 mt-4 p-2 shadow ${active ? 'current' : ''}`}
            >
              {size}
              <span>Your size</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Вот что Я получаю:

Это то, что я хочу:

Я уверен, что есть какой-то очевидный способ сделать это, но время уже поздно, и я в настоящее время довольно тупой, поэтому, пожалуйста, ведите меня к свету.

Answer 1

Все ваши div'ы находятся в том же состоянии, что и логическое, вместо использования логического значения для активной, это должна быть уникальная строка / число, например, размер.

function AvailableSizes(props) {
  const [active, setActive] = useState(null);

  return (
    <div className="sizes">
      <h4>Available Sizes</h4>
      <div className="d-flex mb-4 flex-wrap flex-row">
        {props.sizes.map(size => {
          return (
            <div
              onClick={() => setActive(size)}
              key={size}
              className={
                `size m-2 mt-4 p-2 shadow ${active === size ? 'current' : ''}`
              }
            >
              {size}
              <span>Your size</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Answer 2

это довольно просто. просто выделите размер в другом компоненте.

function SingleSize({ size }) {
  const [active, setActive] = useState(false);
  return (
    <div 
       className={`size m-2 mt-4 p-2 shadow ${activeProp ? 'current' : ''}`}
       onClick={() => setActive(!active)}
    >
      {size}
      <span>Your size</span>
    </div>
  )
}


function AvailableSizes(props) {
  return (
    <div className="sizes">
      <h4>Available Sizes</h4>
      <div className="d-flex mb-4 flex-wrap flex-row">
        {props.sizes.map(size => <SingleSize key={size} size={size} />)}
      </div>
    </div>
  );
}

эта проблема из-за active здесь состояние компонента AvailableSize, а не состояние для каждого отдельного размера.