Show button only from a specific <li> button

Question

I am developing a web application where this green confirm button shown in the image, is only displayed when the blue edit button is clicked. These "cards" are li’s that are generated dynamically as I make a new registration. What happens is that when I click the edit button (the blue pencil) of any card, it displays the confirm button of all cards. I wanted to know how to display the button confirm only for the card that was clicked.

Image 1: Example of cards in which you left the confirm buttons visible.

Image 2: li’s are generated through a map that traverses an array, receiving all "repair" entries (bank table).

---

const [visible, setVisible] = useState(true);
const [nameClass, setNameClass] = useState({ className: "hideButton" });

I have these two states that I keep select visibility and button class name confirm

function showButton() {
        setVisible(!visible);
        setNameClass({ className: "confirmButton" });
        if (nameClass.className === "confirmButton") {
            setNameClass({ className: "hideButton" });
        }
    };

showButton() changes the select disabled to false and changes the class name of the confirm button.

When the classname is set as hideButton, the confirm button receives this style:

.dashboard-container main.reparos li .hideButton {
    display: none;
}

When Showbutton() changes to confirm:

.dashboard-container main.reparos li .confirmButton {
    display: inline-block;
    color: white;
    background: green;
    border: 0;
    border-radius: 5px;
    transition: filter 0.2s;
    font-weight: 500;
    font-size: 12px;
    padding: 0 10px;
    cursor: pointer;
    height: 30px;
    margin-left: 10px;
    animation: surge 400ms;
}

.dashboard-container main.reparos li .confirmButton:hover {
    filter: brightness(92%);
}

Answer 1

Hello friend I thought in a more generic way but I believe it will help you, in case I used the index of the array that is easily accessed in some methods that run arrays in JS, in case I used the .map. But you have can use based on id or any unique value, Also not attached to his style, only answered his first question: "I wanted to know how to display the button confirm only for the card that was clicked".

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

export default function App() {
  const [cardsState, setCardsState] = useState([
    {
      id: 1,
      title: "Primeiro Card",
      text: "bla bla bla",
      updated: false
    },
    {
      id: 2,
      title: "Segundo Card",
      text: "bla bla bla",
      updated: false
    },
    {
      id: 3,
      title: "terceiro Card",
      text: "bla bla bla",
      updated: false
    }
  ]);

  const updateCardCallback = useCallback(
    index => {
      return setCardsState(cardsState.map(
        (card, i) => {
          if(i === index){
            return (
              {
                ...card,
                update: true
              }
            )
          }
          return card
        }
      ));
    },
    [cardsState]
  );

  const checkUpdate = update => {
    if (update) {
      return <span>update</span>;
    }
  };


  return (
    <div className="App">
      {cardsState.map((card, index) => {
        return (
          <div style={{ border: "2px solid black"}} key={card.id}>
            <h3>{card.title}</h3>
            <button onClick={() => updateCardCallback(index)}>editar</button>
            {checkUpdate(card.updated)}
          </div>
        );
      })}
    </div>
  );
}