React state hook, toogle class, why are both elements getting the "active" class?

Hope you can help me.

Why are both my li elements getting the active class applied to it?

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;

In your current example, both list items share the same state.

Therefore, on each render, toggling the state will reflect both <li/> items.

You want each list item to have its own active state.

Note that you have some bugs like string 'false', comparing the className with setActive function and not having the noactive CSS class.

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;