Bekerja dengan Radio di React

Bekerja dengan radio radio agak berbeda, misalnya, dari kotak centang. Masalahnya adalah beberapa radio akan memiliki state yang sama, tetapi value yang berbeda.

Oleh karena itu, cara kerjanya adalah sebagai berikut: setiap tombol radio dalam atribut value menuliskan nilainya sendiri, dan dalam atribut checked - kondisi khusus yang memeriksa, apakah state sama dengan nilai tertentu. Jika sama - tombol radio akan menjadi tercentang, dan jika tidak sama - akan menjadi tidak tercentang.

Berikut implementasi dari yang dijelaskan:

jsxfunction App() {
  const [value, setValue] = useState(1);
  
  function changeHandler(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input
      type="radio"
      name="radio"
      value="1"
      checked={value === '1' ? true : false}
      onChange={changeHandler}
    />
    <input
      type="radio"
      name="radio"
      value="2"
      checked={value === '2' ? true : false}
      onChange={changeHandler}
    />
    <input
      type="radio"
      name="radio"
      value="3"
      checked={value === '3' ? true : false}
      onChange={changeHandler}
    />
  </div>
}