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

Question

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

Answer 1

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>