Tengo un componente padre que es mi template de carro. Donde itero sobre un array para crear una lista de opciones de envío.
<div className="shipping-method-container">
{shippingRates && shippingRates.map((rate, i) => {
return (<ShippingMethod
checkboxState={checkboxState}
checkboxStateSetter={setCheckboxState}
key={`${rate.node.stripe_shipping_id}-${i}`}
dataFromParent={rate}/>)
})
}
</div>
En este componente padre tengo el estado y la función para cambiar el estado.
const [checkboxState, setCheckboxState] = useState('');
function handleCheckboxChange (value, dataFromChild) {
setCheckboxState(value);
}
Y luego en el componente hijo tengo la UI que necesito. El componente Checkbox es de Semantic UI React.
export const ShippingMethod = ({
customCSS,
dataFromParent,
checkboxState,
checkboxStateSetter
}) => {
const [shippingRateID, setShippingRateID] = useState("")
useEffect(() => {
setShippingRateID(dataFromParent.node.stripe_shipping_id)
}, [])
const currencySymbol = getCurrencySymbol(dataFromParent.node.stripe_shipping_rate.currency)
const min = dataFromParent.node.stripe_shipping_rate.delivery_estimate === null ? "" : dataFromParent.node.stripe_shipping_rate.delivery_estimate.minimum.value
const max = dataFromParent.node.stripe_shipping_rate.delivery_estimate === null ? "" : dataFromParent.node.stripe_shipping_rate.delivery_estimate.maximum.value
function handleClick(value, data) {
sessionStorage.setItem("shipping_rate", dataFromParent.node.stripe_shipping_id)
}
return (
<div className={["component_ShippingMethod", customCSS ].join(" ")}>
<div className="shipping-method-first-line">
<p >
<Checkbox
radio
type="checkbox"
id={"shipping_rate"}
name="shipping_rate"
value={shippingRateID}
onChange={(e, data) => checkboxStateSetter(e.target.value, data)}
checked={checkboxState === shippingRateID}
onClick={(e, data)=> handleClick(e.target.value, data)}
/>
{dataFromParent.node.stripe_shipping_rate.display_name} {shippingRateID}
</p>
<p>{currencySymbol}{dataFromParent.node.stripe_shipping_rate.amount/100}</p>
</div>
<p className="shipping-method-second-line"> {min} - {max} business days</p>
</div>
)
}
La UI se renderiza bien. Sin problemas. Pero curiosamente, cuando selecciono uno de los Shipping rates, es decir, hago click en uno de los componentes hijo. Solo me envia al session Storage (y muestra cómo checkeado el checkbox) del primero. React pareciara no interpretar diferentes componentes. Aunque sí muestra en la UI diferentes ID's y diferente información por cada uno. Algunas Ideas ??
console.log
y ayudanos confirmando, si los valores desesionstorage. shipping_rate
cambian cada que el usuario selecciona un checkbox distinto de la lista, ya que eso parece funcionar bien. El problema parece estar en la presentación de los checkbox (cual debe quedar seleccionado).checked id's
ensessionStorage
, y manejar el estadocheckboxState
de forma dinámica. Sugiero verificar el estadodataFromParent.node.stripe_shipping_id
para cada componenteShippingMethod
en consola; se espera ver unstripe_shipping_id
diferente en cada uno de ellos. Si puedes confirmar.