You see here, the first radio button defaultChecked={index === 0} is by default checked. I am storing the mapped variant object when it's changed.onChange. how do I store the value of variant when user doesn't change anything and just press add item?
I can't set the state inside .map it causes render issues.
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>
If you are using checkbox and the first is by default selected, then you can initialise your state with the first value present in the state like 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>
Also, I assume that props.selectedCustomItem.variants is not null or undefined.