export const data = [
  {
    size: "S",
    colorMap: { Yellow: 10, Green: 5, Black: 50 },
    productName: "Shirt",
    price: 200
  }
];

I wanted to show the initial values of the colorMapand then update its quantity. How can I update the quantities of the colors which are the values of the Object.entries(colorMap)?

Codesandbox: https://codesandbox.io/s/form-changehanlder-2-2repsp?file=/part2.js

The product here came from the parent component:

This is the child component

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;

CodePudding user response：

First make changeHandler in demo.js as you are using React State in demo.js so you have to make onChangeHandler in that file and pass it in props of part2. Like:

const onChangeValues = (propertyName, index, value) => {
let item = product?.[index];
if (item) {
  item.colorMap[propertyName] = value;
  let prods = [...product];
  prods[index] = item;
  setProduct(prods);
}
};

And pass this function in props of Part2:

 <Grid item>
     <Part2 product={product} onChange={onChangeValues} />
 </Grid>

In part2 Component you can consume it as follows:

 <TextField
     type="number"
     variant="outlined"
     fullWidth
     label="Quantity"
     value={color[1]}
     onChange={({ target: { value } }) => {
        onChangeHandler(color[0], index, value);
     }}
  />

Codesandbox Link: https://codesandbox.io/s/form-changehanlder-2-forked-l9unl0?file=/part2.js:1131-1521