Hello I have question about how I can make user select one checkbox at a time. So for example, if there is three checkbox(none are selected when page loads) on react component and user select one checkbox, the other checkbox will not be checked unless user uncheck it. I am trying to use useref to make it to work... but seems like it is not working..
const refCheckBoxOne = useRef(null);
const refCheckBoxTwo = useRef(null);
const refCheckBoxThree = useRef(null);
const onchangefunction = (propertyname, value) => {
if(refcheckBoxOne.current.check){
refcheckBoxOne.current.check = false;
refcheckBoxOne.current.check = false;
}
}
<input id="one" ref={refCheckBoxOne} userefonchange={(e) => onchangefunction("checkboxOne",e.target.value) }/>
<input id="two" ref={refCheckBoxTwo} onchange={(e) => onchangefunction("checkboxTwo",e.target.value) }/>
<input id="three" ref={refCheckBoxThree} onchange={(e) => onchangefunction("checkboxThree",e.target.value) }/>
I have tried many ways to do it... but cant get it to work. I would be really appreciated if anyone can give me an idea on how to approach this kind of issue.
Thank you
If two items you can use this
const App = () => {
const [checked, setChecked] = React.useState(false);
const handleChange = () => {
setChecked(!checked);
};
return (
<div>
<label>
<input
type="checkbox"
checked={checked}
onChange={handleChange}
/>
</label>
</div>
);
};
If multiple value then use it
export default function App() {
const [checkedState, setCheckedState] = useState(
[false,false,false]
);
const handleOnChange = (position) => {
const updatedCheckedState = checkedState.map((item, index) =>
index === position ? !item : item
);
setCheckedState(updatedCheckedState);
};
return (
<div className="App">
<h3>Select Toppings</h3>
<ul className="toppings-list">
<li key=0>
<div className="toppings-list-item">
<div className="left-section">
<input
type="checkbox"
id=`custom-checkbox-1`
checked={checkedState[0]}
onChange={() => handleOnChange(0)}
/>
</div>
</div>
</li>
<li key=1>
<div className="toppings-list-item">
<div className="left-section">
<input
type="checkbox"
id=`custom-checkbox-1`
checked={checkedState[1]}
onChange={() => handleOnChange(1)}
/>
</div>
</div>
</li>
<li key=2>
<div className="toppings-list-item">
<div className="left-section">
<input
type="checkbox"
id=`custom-checkbox-2`
checked={checkedState[2]}
onChange={() => handleOnChange(2)}
/>
</div>
</div>
</li>
</ul>
</div>
If you have any question , Comment below here .