How to check an item and disable another checkbox in react?-CodePudding

I have a list of items from API. I also have two checkboxes to approve or decline an item. I want to be able to check the approve box and disable the decline box for an item.

function AllReferral() {

    const [buttonStatus1, setButtonStatus1] = useState(false)
    const [buttonStatus2, setButtonStatus2] = useState(false)

//function
    const deactivateButton2 = () => setButtonStatus1(!buttonStatus1)
    const deactivateButton1 = () => setButtonStatus2(!buttonStatus2)

 
  return (
    <section>
      <div>
       
        {user?.services?.length > 0 && (
          <div>
            <table>
              <thead>
                <tr>
                  <th >Approve</th>
                 <th >Decline</th>
                  <th >Service Name</th>
                 
                </tr>
              </thead>
              {user?.services?.map((item, index) => (
                <tbody key={index}>
                  <tr>
                    <td>
                      <input
                        name={item?.name}
                        onClick={deactivateButton2}
                        type="checkbox"
                        value={checked}
                        onChange={(e) => setChecked(e.target.value)}
                      />
                    </td>
                      <td>
                      <input
                        name={item?.name}
                        onClick={deactivateButton1}
                        type="checkbox"
                        value={checked2}
                        onChange={(e) => setChecked2(e.target.value)}
                      />
                    </td>

                    <td>{item?.label}</td>
                  </tr>
                </tbody>
              ))}
            </table>
          </div>
        )}
      </div>
    </section>
  );
}

Above is one of many trials I've done but I still don't get the desired action I need. I would appreciate some help

CodePudding user response：

The easiest way to do this is to use a radio button. The default behavior of radio buttons is that if you select one radio button the others are automatically deselected.

If you want to have it as a checkbox, you can use a controlled input. Below is an example implementation that uses a shared state for the inputs.

function App () {
  const [status, setStatus] = React.useState(false)
  
  const handleChange = e => setStatus(prevState => !prevState)

  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={status}
          onChange={handleChange}
        />
        Accept
      </label>
      <label>
        <input
          type="checkbox"
          checked={!status}
          onChange={handleChange}
        />
        Decline
      </label>
    </div>
  )
}


ReactDOM.createRoot(document.getElementById("root")).render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<div id="root"></div>