I'm trying to display the value of the select field, however, this is what the error shows:

Cannot read properties of undefined (reading 'value')

This is the codesandbox link: https://codesandbox.io/s/basicselect-material-demo-forked-4g34r?file=/demo.js

Below are the codes:

import React, { useState, useEffect } from "react";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";

import { TextField, Button } from "@mui/material";

export default function BasicSelect() {
  const [prod, setProd] = useState("");
  const [qty, setQty] = useState(0);
  const [design, setDesign] = useState("");
  const [size, setSize] = useState("");

  const handleChange = (event) => {
    setProd(event.target.value);
  };

  const handleChangeSize = (event) => {
    setSize(event.target.value);
  };

  const handleChangeDesign = (event) => {
    setDesign(event.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(prod, qty, size, design);
  };

  const [sizeList, setSizeList] = useState([{ size: "" }]);
  console.log(sizeList);

  //helper method
  const handleAdd = () => {
    setSizeList([...sizeList, { size: "" }]);
  };

  const handleRemove = (index) => {
    const list = [...sizeList];
    list.splice(index, 1);
    setSizeList(list);
  };

  const handleSizeChange = (e, index) => {
    const { name, value } = e.tagret.value;
    const list = [...sizeList];
    list[index][name] = value;
    setSizeList(list);
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      <form onSubmit={handleSubmit}>
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Product</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={prod}
            label="Product"
            onChange={handleChange}
          >
            <MenuItem value="Item1">Item1</MenuItem>
            <MenuItem value="Item2">Item2</MenuItem>
            <MenuItem value="Item3">Item3</MenuItem>
          </Select>
        </FormControl>
        <br />
        <br />
        {/* <TextField
          type="number"
          label="Quantity"
          variant="outlined"
          value={qty}
          onChange={(e) => setQty(e.target.value)}
          fullWidth
        /> */}

        <br />

        <br />
        {sizeList.map((singleSize, index) => (
          <div key={index}>
            <FormControl fullWidth>
              <InputLabel id="demo-simple-select-label">Size</InputLabel>
              <Select
                labelId="demo-simple-select-label"
                id="size"
                value={singleSize.size}
                label="Product"
                // onChange={handleChangeSize}
                onChange={(e) => handleSizeChange(e, index)}
              >
                <MenuItem value="S">Small</MenuItem>
                <MenuItem value="M">Medium</MenuItem>
                <MenuItem value="L">Large</MenuItem>
              </Select>
            </FormControl>

            <br />
            <br />
            {sizeList.length > 1 && (
              <Button
                onClick={() => handleRemove(index)}
                variant="contained"
                color="secondary"
              >
                Remove{" "}
              </Button>
            )}
            <br />
            <br />
            {sizeList.length - 1 === index && (
              <Button variant="contained" onClick={handleAdd}>
                {" "}
                Add Quantity
              </Button>
            )}
          </div>
        ))}

        <br />
        <br />
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Choose Design</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={design}
            label="Product"
            onChange={handleChangeDesign}
          >
            <MenuItem value="Design1">Design1</MenuItem>
            <MenuItem value="Design2">Design2</MenuItem>
            <MenuItem value="Design3">Design3</MenuItem>
          </Select>
        </FormControl>
        <br />
        <br />
        <Button type="submit">Submit </Button>
      </form>
      <Button>Add more Product </Button>
    </Box>
  );
}

CodePudding user response：

You have misspelled

target

instead of

target on

const { name, value } = e.tagret.value;