Tengo un radiobutton con dos opciones: uno se llama "si" y el otro botón se llama "no". Al darle clic al botón "si" este me abre un div con otro radiobutton, al darle clic al boton "no" el div se oculta con el radio button; lo que necesito es que se mantenga lo seleccionado en el radio button que está en el div cuando se muestra ya que si se oculta y vuelve y se muestra no aparece lo que seleccioné:
Código: https://codesandbox.io/s/elated-dew-75dwf0?file=/src/App.js:0-1747
Código:
import React, { useState } from "react";
function Pruebas() {
const [value2, setValue2] = useState("no");
return (
<div>
<div className="col-sm-6">
<div className="form-check">
<input
className="form-check-input"
type="radio"
name="radio1"
value="no"
checked={value2 === "no"}
onChange={(e) => setValue2(e.currentTarget.value)}
/>
<label className="form-check-label">NO</label>
<input
className="form-check-input"
type="radio"
value="si"
name="radio1"
checked={value2 === "si"}
onChange={(e) => setValue2(e.currentTarget.value)}
/>
<label className="form-check-label">SI</label>
</div>
</div>
<div className="col-sm-7">
{value2 === "si" && (
<div className="card">
<div className="card-body">
<div className="form-check">
<input
className="form-check-input"
type="radio"
name="radio1_div"
value="div_no"
/>
<label className="form-check-label">DIV_NO</label>
<input
className="form-check-input"
type="radio"
value="div_si"
name="radio1_div"
/>
<label className="form-check-label">DIV_SI</label>
</div>
</div>
</div>
)}
</div>
</div>
);
}
export default Pruebas;