Verá aquí, el primer botón defaultChecked={index === 0} está marcado de forma predeterminada. Estoy almacenando el objeto variant asignado cuando se cambia. onChange . ¿Cómo almaceno el valor de la variant cuando el usuario no cambia nada y solo presiona agregar elemento?
No puedo configurar el estado dentro de .map , causa problemas de renderizado.
const [variantOption, setVariantOption] = useState({}); const [variant, setVariant] = useState([]); props.selectedCustomItem.variants.map((variant, index) => { {variant.options.map((option, index) => { <input type="radio" name="variant-select" id="variant-select" defaultChecked={index === 0} value={option.price} onChange={(e) => { setVariantOption(option); setVariant(variant); }} />} <button onClick={() => { props.addFoodItems(variant, variantOption); }} >add item</button>Si está utilizando la casilla de verificación y la primera está seleccionada de forma predeterminada, puede inicializar su estado con el primer valor presente en el estado como useState(props.selectedCustomItem.variants[0])
const [variantOption, setVariantOption] = useState(); const [variant, setVariant] = useState(props.selectedCustomItem.variants[0]); useEffect(() => { if (variantOption == null && variant && variant.length > 0) { setVariantOption(variant.options[0]); } }, [variantOptions, variant]); props.selectedCustomItem.variants.map((variant, index) => { {variant.options.map((option, index) => { <input type="radio" name="variant-select" id="variant-select" defaultChecked={index === 0} value={option.price} onChange={(e) => { setVariantOption(option); setVariant(variant); }} />} <button onClick={() => { props.addFoodItems(variant, variantOption); }} >add item</button> Además, supongo que props.selectedCustomItem.variants no es nulo ni indefinido.