How to independently set a button click in react?

Question

I am trying to figure out on how to set a button that can independently be disabled when using the .map function. So I created a state whenever the button is clicked, it disables that specific button. However, it only disables all of the buttons which is not what i wanted. Is there a way to make the buttons have their own click event which can be disabled according to the index?

  const [click, setClick] = useState(false);
  const array = ["item 1", "item 2", "item 3"];

  const disableClick = () => {
    setClick(true);
  };
  
  return (
    <div className="App">
      {array.map((item) => (
        <div>
          <h2>{item}</h2>
          {!click ? (
            <button onClick={disableClick}>CLICK {item}</button>
          ) : (
            <button disabled>Button clicked</button>
          )}
        </div>
      ))}
    </div>
  );

Answer 1

Move the click handler and useState in a separate component.

const ButtonView = (textContent) => {
  const [disabled, setDisabled] = useState(false);

  const onClick = () => {
    setDisabled(true);
  };

  if (disabled) {
    return <button disabled={disabled}>Button clicked</button>;
  }

  return <button onClick={onClick}>CLICK {textContent}</button>;
};

export const View = () => {
  const array = ["item 1", "item 2", "item 3"];
  
  return (
    <div className="App">
      {array.map((item, key) => (
        <div key={key}>
          <h2>{item}</h2>
          <ButtonView textContent={item} />
        </div>
      ))}
    </div>
  );
};

Or do this:

const ButtonView = (textContent) => {
  const [disabled, setDisabled] = useState(false);

  const onClick = () => {
    setDisabled(true);
  };
  const content = disabled ? "Button clicked" : textContent
  return <button disabled={disabled} onClick={onClick}>CLICK {content}</button>;
};

Answer 2

Disable takes an arguments you can supply it with <button disabled={click? true:false} >Button clicked</button>

Is there a way to make the buttons have their own click event which can be disabled according to the index?

Yes, How? instead of setting the click state to true or false, we can set it to contain name of the button const [disabledBtn, setDisabledBtn] = useState("item 1"); and then we can compare it with the items from the map. <button disabled={disabledBtn == item ? true:false} >Button clicked</button>

This code render the buttons with the first button disabled by default, if the user clicks on one of the other available buttons it will trigger rerender and that btn will be disabled. You should add a key to your childern components to maintain uniqueness between renderings.

This code snippet should answer your question

const [disabledBtn, setDisabledBtn] = useState("item 1");
const array = ["item 1", "item 2", "item 3"];

const handleDisableClick = (item) => {
  setDisabledBtn(item);
};

return (
  <div className="App">
    {array.map((item, idx) => (
      <div key={idx}>
        <h2>{item}</h2>
        <button
          disabled={disabledBtn == item ? true : false}
          onClick={() => handleDisableClick(item)}
        >
          Button clicked
        </button>
      </div>
    ))}
  </div>
);