Реакция состояния, класс toogle, почему оба элемента получают «активный» класс?

Question

Надеюсь, вы можете мне помочь.

Почему оба моих элемента li применяют к нему активный класс?

import React, { useState } from "react";
import "./styles.css";

const App = () => {
  const [active, setActive] = useState("false");

  const creditValues = [
    {
      month: 6,
      monthly: 102.72,
      interest: 24.36,
      cost: 616.32,
      total: 591.96
    },
    {
      month: 12,
      monthly: 53.15,
      interest: 24.36,
      cost: 616.32,
      total: 591.96
    }
  ];

  return (
    <ul className="monthly-instalments">
      {creditValues.map(creditValue => (
        <li
          className={setActive ? "active" : "notactive"}
          data-month={creditValue.month}
          data-interval={creditValue.interval}
          data-apr={creditValue.apr}
          data-monthly={creditValue.monthly}
          data-interest={creditValue.interest}
          data-cost={creditValue.cost}
          data-total={creditValue.total}
          onClick={() => setActive(!active)}
        >
          {creditValue.month} months
        </li>
      ))}
    </ul>
  );
};

export default App;

Answer 1

В вашем текущем примере оба элемента списка находятся в одном и том же состоянии.

Поэтому при каждом рендеринге переключение состояния будет отражать оба <li/> элемента.

Требуется каждый элемент списка иметь свое собственное состояние active.

Обратите внимание, что у вас есть некоторые ошибки, такие как строка 'false', сравнивающая className с setActive функцией и не имеющая класс noactive CSS.

import React, { useState } from 'react';
import './styles.css';

const creditValues = [
  {
    month: 6,
    monthly: 102.72,
    interest: 24.36,
    cost: 616.32,
    total: 591.96,
  },
  {
    month: 12,
    monthly: 53.15,
    interest: 24.36,
    cost: 616.32,
    total: 591.96,
  },
];

const Item = ({ children }) => {
  const [active, setActive] = useState(false);

  return (
    <li
      className={active ? 'active' : 'noactive'}
      onClick={() => setActive(p => !p)}
    >
      {children}
    </li>
  );
};

const App = () => {
  return (
    <ul className="monthly-instalments">
      {creditValues.map((creditValue, index) => (
        <Item key={index}>{creditValue.month} months</Item>
      ))}
    </ul>
  );
};

export default App;