Force one selection checkboxe with REACT - reactjs

Question

how can I force only one check among multiple checkboxes ? For now I can select A, B and C but I only want to select ONE choice no more.
Here is my code :
const TabContent = ({ name, typeText }) => {
const [a, setA] = useState(false)
const [b, setB] = useState(false)
const [c, setC] = useState(false)
function handleChange(e) {
e.preventDefault()
}
return (
<form onSubmit={handleChange} >
{a}
{b}
{b}
<input type="checkbox" onChange={(e) => setA(!a)} /> <label> A </label>
<input type="checkbox" onChange={(e) => setB(!b)} /> <label>B</label>
<input type="checkbox" onChange={(e) => setC(!C)} /> <label>C</label>
</form>
{
(a || b) ?
(<div>
<p className="mt-6 py-1">My choices </p>
<SafeAreaView>
<TextInput
onChangeText={(value) => setText(value)}
value={text}
/>
</SafeAreaView>
</div >
)
: ('')
}
{
c?
(...)
}
</div >
);
};

Answer 1

I think you want to use radio input
Example to illustrate this:
https://codesandbox.io/s/elegant-tess-wu7sl7?file=/src/App.js:0-794
import React, { useState } from "react";
export const TabContent = ({ name, typeText }) => {
const [radio, setRadio] = useState(false);
function handleChange(e) {
e.preventDefault();
}
return (
<form onSubmit={handleChange}>
<input
type="radio"
value="A"
onChange={(e) => setRadio(e.target.value)}
checked={radio === "A"}
/>
<label> A </label>
<input
type="radio"
value="B"
checked={radio === "B"}
onChange={(e) => setRadio(e.target.value)}
/>
<label>B</label>
<input
type="radio"
value="C"
checked={radio === "C"}
onChange={(e) => setRadio(e.target.value)}
/>
<label>C</label>
</form>
);
};
export default TabContent;
This way you only keep track of one state.

Answer 2

You can refactor your state with object state instead of using 3 states
const TabContent = ({ name, typeText }) => {
const [check, setCheck] = useState({selected: "", checked: false})
const handleCheckbox = (type) => {
if(type === check.selected && check.checked) {
setCheck({...check, checked: false})
} else {
setCheck({selected: type, checked: true})
}
}
function handleChange(e) {
e.preventDefault()
}
return (
<form onSubmit={handleChange} >
{check.selected}
<input type="checkbox" onChange={(e) => handleCheckbox("a")} /> <label> A </label>
<input type="checkbox" onChange={(e) => handleCheckbox("b")} /> <label>B</label>
<input type="checkbox" onChange={(e) => handleCheckbox("c")} /> <label>C</label>
</form>
{
(check.selected === ("a" || "b")) ?
(<div>
<p className="mt-6 py-1">My choices </p>
<SafeAreaView>
<TextInput
onChangeText={(value) => setText(value)}
value={text}
/>
</SafeAreaView>
</div >
)
: ('')
}
{
(check.selected === "c") ?
(...)
}
</div >
);
};