Is there a way to only target one button in the React map?

Question

I am trying to make only one button in my React map method interactive. but when I click on one of them, they both react. I would like to target only one button.Kindly assist

import React, { useEffect, useState } from "react";

function Women() {
  const [womenShoes, setWomenShoes] = useState([]);
  const [count, setCount] = useState(0);
  const [addToCart, setAddToCart] = useState(true);

  const addItems = () => {
    setCount(count + 1);
    setAddToCart(!addToCart);
  };

  useEffect(() => {
    fetch("https://pacific-leaf-twig.glitch.me/women-shoes")
      .then((response) => response.json())
      .then((data) => setWomenShoes(data));
  }, []);

  return (
    <div className="d-flex flex-wrap justify-content-center gap-5 mt-5">
      {womenShoes.map((shoe, index) => (
        <div key={index} className="card mt-5" style={{ width: "25rem" }}>
          <img src={shoe.img} className="card-img-top img-fluid" alt="A shoe" />
          <div className="card-body d-flex">
            <div>
              <h5 className="card-title">{shoe.name}</h5>
              <p className="card-text">{`Items Remaining ${shoe.itemsLeft}`}</p>
              <button onClick={addItems} className="btn btn-primary">
                {addToCart ? "Add to Cart" : "Remove from the Cart"}
              </button>
            </div>
            <div className="mx-auto align-self-center">
              <h4>{`$ ${shoe.price}`}</h4>
            </div>
          </div>
        </div>
      ))}
      <div className="counter">{`Items: ${count}`}</div>
    </div>
  );
}

export default Women;

Answer 1

You need to make a separate component for the button in order for it to have its own state. Here's a quick draft showing the changes:

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'

/* Button component with its own state. */
function AddButton({addItems}) {
  const [addToCart, setAddToCart] = useState(true);

  function addItem(){
    addItems();
    setAddToCart(!addToCart);
  }
  
  return (
    <button onClick={addItem} className="btn btn-primary">
      {addToCart ? "Add to Cart" : "Remove from the Cart"}
    </button>
  )
}

function Women() {
  const [womenShoes, setWomenShoes] = useState([]);
  const [count, setCount] = useState(0);

  const addItems = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    fetch("https://pacific-leaf-twig.glitch.me/women-shoes")
      .then((response) => response.json())
      .then((data) => setWomenShoes(data));
  }, []);

  return (
    <div className="d-flex flex-wrap justify-content-center gap-5 mt-5">
      {womenShoes.map((shoe, index) => (
        <div key={index} className="card mt-5" style={{ width: "25rem" }}>
          <img src={shoe.img} className="card-img-top img-fluid" alt="A shoe" />
          <div className="card-body d-flex">
            <div>
              <h5 className="card-title">{shoe.name}</h5>
              <p className="card-text">{`Items Remaining ${shoe.itemsLeft}`}</p>
              <AddButton addItems={addItems}/>
            </div>
            <div className="mx-auto align-self-center">
              <h4>{`$ ${shoe.price}`}</h4>
            </div>
          </div>
        </div>
      ))}
      <div className="counter">{`Items: ${count}`}</div>
    </div>
  );
}

ReactDOM.render(
  <Women />,
  document.getElementById('container')
);