Tengo un problema con mi aplicación ReactJS. Quiero obtener los valores de los botones de radio marcados y después de seleccionar quiero mostrar los valores de los botones de radio seleccionados.
El formulario se genera a partir de un archivo json.
[ { variantId: 1, variantName: 'Size', variantOptions: [ { variantOptionId: 1, variantOptionName: 'S', variantOptionPriceChange: 4.5 }, { variantOptionId: 2, variantOptionName: 'M', variantOptionPriceChange: 4.5 }, ] }, { variantId: 2, variantName: 'Color', variantOptions: [ { variantOptionId: 3, variantOptionName: 'Red', variantOptionPriceChange: 4.5 }, { variantOptionId: 4, variantOptionName: 'Blue', variantOptionPriceChange: 4.5 }, ] } ]La demostración del problema se puede ver aquí: https://codesandbox.io/s/epic-http-bgmx3?file=/src/App.js
Quiero mostrar todos los elementos seleccionados, no solo el último.
El problema está en esta parte del código, pero no sé cómo reescribirlo para lograr el comportamiento deseado.
const addOption = (o) => { setOptions({ optionId: o.variantOptionId, optionName: o.variantOptionName, optionPriceChange: o.variantOptionPriceChange }); };Gracias por su ayuda, espero haberlo descrito claramente.
La solución más simple sería crear un objeto en estado de uso con claves de apoyo para cada variante y luego almacenar la opción seleccionada de esa variante en el objeto relacionado.
Debería funcionar así:
export default function App() { const [options, setOptions] = useState({}); const addOption = (name, o) => { setOptions({ ...options, [name]: o }); }; return ( <div className="App"> {variants.map((variant, index) => { return ( <Variant options={options} variant={variant} addOption={addOption} key={index} /> ); })} <h3> Selected variants are: <ul> {Object.keys(options).map((name, i) => { return ( <li key={i}> {name}: {options[name].variantOptionName} </li> ); })} </ul> </h3> </div> ); }