export const data = [ { size: "S", colorMap: { Yellow: 10, Green: 5, Black: 50 }, productName: "Shirt", price: 200 } ]; Quería mostrar los valores iniciales del colorMap y luego actualizar su cantidad. ¿Cómo puedo actualizar las cantidades de los colores que son los values de Object.entries(colorMap) ?
Códigos y caja: https://codesandbox.io/s/form-changehanlder-2-2repsp?file=/part2.js
El product aquí proviene del componente principal:
Este es el componente hijo
import React, { useState } from "react"; import { Grid, TextField } from "@mui/material"; const Part2 = ({ product }) => { const [qty, setQty] = useState(); const handleSubmit = (e) => { e.preventDefault(); console.log(qty); }; return ( <div> {product && product.map((prod, index) => ( <> <Grid item key={index}> <form onSubmit={handleSubmit}> {Object.entries(prod.colorMap).map((color, index) => ( <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} key={color[0]} > <Grid item xs={6}> <TextField type="text" variant="outlined" label="Color" fullWidth value={color[0]} disabled /> </Grid> <Grid item xs={6}> <TextField type="number" variant="outlined" fullWidth label="Quantity" value={color[1]} onChange={(e) => console.log(index)} /> </Grid> </Grid> ))} </form> </Grid> </> ))} </div> ); }; export default Part2;Primero haga changeHandler en demo.js ya que está usando React State en demo.js, por lo que debe hacer onChangeHandler en ese archivo y pasarlo en los accesorios de la parte 2. Me gusta:
const onChangeValues = (propertyName, index, value) => { let item = product?.[index]; if (item) { item.colorMap[propertyName] = value; let prods = [...product]; prods[index] = item; setProduct(prods); } };Y pasa esta función en props de Part2:
<Grid item> <Part2 product={product} onChange={onChangeValues} /> </Grid>En part2 Component puedes consumirlo de la siguiente manera:
<TextField type="number" variant="outlined" fullWidth label="Quantity" value={color[1]} onChange={({ target: { value } }) => { onChangeHandler(color[0], index, value); }} />Enlace de Codesandbox: https://codesandbox.io/s/form-changehanlder-2-forked-l9unl0?file=/part2.js:1131-1521