To make list of checkbox behave as radio button - reactjs

Question

I have created a checkbox with the list of data in useState. Now I need to make the checkbox work as a radio button. what kind of logic I need to use to make a checkbox work as a radio button
import { useState } from "react";
const Checkbox = () => {
const [items, setItems] = useState([
{ id: 1, checked: false, item: "apple" },
{ id: 2, checked: false, item: "bananna" },
{ id: 3, checked: false, item: "cherry" },
{ id: 4, checked: false, item: "dragon fruit" }
]);
const handleCheck = (id) => {
const listItem = items.map((item) => item.id === id ? {...item, checked: !item.checked} : item)
setItems(listItem)
}
return(
<div>
<ul>
{
items.map((item) => (
<li key={item.id}>
<input
type="checkbox"
checked = {item.checked}
onChange = {() =>handleCheck(item.id)}
/>
<lable>{item.item}</lable>
</li>
))
}
</ul>
</div>
)
}
export default Checkbox;

Answer 1

Just set all the other items' checked properties to false:
const handleCheck = (id) => {
const listItem = items.map((item) =>
item.id === id
? { ...item, checked: !item.checked }
: { ...item, checked: false }
);
setItems(listItem);
};
Hope this helps.

Answer 2

If you want to use this as radio button logic, like selecting only one check box at a time.
while setting true for a particular checkbox, you can also set false for rest of the checkboxes
const handleCheck = (id) => {
const listItem =
items.map((item) =>
item.id === id ? {...item, checked: !item.checked} : {...item, checked: false} )
setItems(listItem)
}

Answer 3

A bit complicated since it's not a built-in functionality.
In order to make the checkboxes work as radio buttons, you can modify the handleCheck function to uncheck all the other items when one item is checked.
Here's one way to do that:
const handleCheck = (id) => {
const listItem = items.map((item) => {
if (item.id === id) {
return {...item, checked: !item.checked};
} else {
return {...item, checked: false};
}
});
setItems(listItem);
}
This will uncheck all the other items whenever one item is checked, so that only one item can be selected at a time, like a radio button.
Of course, there's also the built-in
<input
type="radio"
checked={item.checked}
onChange={() => handleCheck(item.id)}
/>