Estoy tratando de estructurar mis datos de entrada, pero no obtengo lo que quiero. Los datos de entrada son dinámicos y vendrán de la base de datos.
Supongamos que tengo esto debajo de JSX. Quiero obtener el valor del usuario que seleccionó y también el título del producto que existe en los products . Tenga en cuenta que los datos de la lista son dinámicos. He codificado los valores.
{products.map((product, i) => { return ( <li onChange={(e) => getItemValues(e.target, product)}> <label className="container_radio"> Medium size <span>+ $5.00</span> <input type="radio" value={5.00} name={'Medium size'} /> <span className="checkmark"></span> </label> </li> <li onChange={(e) => getItemValues(e.target, product)}> <label className="container_radio"> Extra Largse size <span>+ $8.00</span> <input type="radio" value={8.00} name={'Extra Largse size'} /> <span className="checkmark"></span> </label> </li> ); })}Aquí está la función para obtener los datos y guardarlos en un estado
const getItemValues = (e, product) => { setItemDetail((prevValue) => [ ...prevValue, { [e.name]: e.value }, { title: product.title }, ]); };La salida del código anterior es:
[0: {Extra Largse size: '8.0'} 1: {Medium size: '5.00'} 2: {title: 'Barnes Chapman'}]Quiero algo como esto
[{title: 'Barnes Chapman', options:{extra large size: '8.0',Medium size: '5.00' } }]Para hacer esto, debe encontrar los detalles del producto en la matriz ItemDetail . Prueba algo como a continuación.
const getItemValues = (e, product) => { setItemDetail((prevValue) => { const existingProduct = prevValue.find(item => item.title === product.title); if(existingProduct) { existingProduct.options = {...existingProduct.options, [e.name]: e.value} return [...prevValue]; } else { /* new entry */ return [...prevValue, {title: product.title, options:{[e.name]: e.value}}] } }); };