Get value from few Select in Material-UI

Question

I have two MUI Select components on my page. I'm trying to set values depends on id of Select. I've checked (id === "breed-select") in console and (at first) it's true, but immediately after that it become false, and i cant understand why. Where i made a mistake? May be there is a better way to set values of two Select components? CodeSandbox

import React from 'react';
import './AddCatPopup.css';
import {Box, Button, FormControl, InputLabel, MenuItem, Select, TextField} from '@mui/material';
import {theme} from '../../theme';
import {ThemeProvider} from '@mui/material/styles';

function AddCatPopup({ breeds, isOpen, onClose, onAddCat }) {

  const breedsName = breeds.map(item => item.nameBreed);

  const colorsArray = [
    'black',
    'white',
    'grey',
    'red',
    'multicolor'
  ];

  const [name, setName] = React.useState('');
  const [price, setPrice] = React.useState(0);
  const [color, setColor] = React.useState('');
  const [age, setAge] = React.useState(0);
  const [breed, setBreed] = React.useState('');

  function handleChange(event) {
    const {
      target: { value, id }
    } = event;
    id === "breed-select" ? setBreed(value) : setColor(value);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return(
    <section className={`popup ${isOpen && 'popup_opened'}`}>
      <div className={'popup__container'}>
        <button type="button" className={'popup__close-btn'} onClick={onClose}></button>
        <p className={'popup__title'}>Enter info about cat</p>
        <TextField sx={{ mt: 1, mb: 1 }}
                   id="standard-required"
                   variant="standard"
                   label="Name"
                   required />

        <TextField sx={{ mt: 1, mb: 1 }}
                   id="standard-required"
                   variant="standard"
                   label="Price"
                   required />

        <FormControl sx={{ mt: 1, mb: 1 }}
                     variant="standard"
                     required>
          <InputLabel id="breed-label">Breed</InputLabel>
          <Select
            labelId="filter-breed"
            id="breed-select"
            label="Breed"
            value={breed}
            onChange={handleChange}
          >
            {breedsName.map((item) => (
              <MenuItem
                key={item}
                value={item}
                id="breed-select"
              >
                {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <FormControl sx={{ mt: 1, mb: 1 }}
                     variant="standard"
                     required>
          <InputLabel id="color-label">Color</InputLabel>
          <Select
            labelId="filter-color"
            id="color-select"
            label="Color"
            value={color}
            onChange={handleChange}
          >
            {colorsArray.map((item) => (
              <MenuItem
                key={item}
                value={item}
                id="color-select"
              >
                {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <TextField sx={{ mt: 1, mb: 1 }}
                   id="standard-required"
                   variant="standard"
                   label="Age"
                   required />

        <ThemeProvider theme={theme}>
          <Button sx={{ mt: 1, mb: 1 }}
                  variant="contained"
                  color={'secondary'}
                  onClick={handleSubmit}>
            Add
          </Button>
        </ThemeProvider>

      </div>
    </section>
  );
}

export default AddCatPopup;

Answer 1

The main problem was that you doesn't get id and value correctly. I understand why you wrote this code, but unfortunately the event which come into handleChange is MouseEvent | PointerEvent so you could not get the correct id and value. The reason why you could choose color in this part id === "breed-select" ? setBreed(value) : setColor(value); you always got id = undefined so the setColor is fired always. You should use second argument of handleChange function. You can copypaste below code to see how does it work now

import React from "react";
import "./AddCatPopup.css";
import {
  Button,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
  TextField
} from "@mui/material";
import { theme } from "./theme";
import { ThemeProvider } from "@mui/material/styles";

function AddCatPopup({ breeds, isOpen, onClose, onAddCat }) {
  const breedsName = breeds.map((item) => item.nameBreed);

  const colorsArray = ["black", "white", "grey", "red", "multicolor"];

  const [name, setName] = React.useState("");
  const [price, setPrice] = React.useState(0);
  const [age, setAge] = React.useState(0);

  const [color, setColor] = React.useState("");
  const [breed, setBreed] = React.useState("");

  function handleChange(event, obj) {
    const target = object.props;
    const id = target.id;
    const value = target.value;

    /breed-option/.test(id) ? setBreed(value) : setColor(value);
  }

  function handleSubmit(e) {
    e.preventDefault();
  }

  return (
    <section className={`popup ${isOpen && "popup_opened"}`}>
      <div className={"popup__container"}>
        <button
          type="button"
          className={"popup__close-btn"}
          onClick={onClose}
        ></button>
        <p className={"popup__title"}>Enter info about cat</p>
        <TextField
          sx={{ mt: 1, mb: 1 }}
          id="standard-required"
          variant="standard"
          label="Name"
          required
        />

        <TextField
          sx={{ mt: 1, mb: 1 }}
          id="standard-required"
          variant="standard"
          label="Price"
          required
        />

        <FormControl sx={{ mt: 1, mb: 1 }} variant="standard" required>
          <InputLabel id="breed-label">Breed</InputLabel>
          <Select
            labelId="filter-breed"
            id="breed-select"
            label="Breed"
            value={breed}
            onChange={handleChange}
          >
            {breedsName.map((item, index) => (
              <MenuItem key={item} value={item} id={'breed-option-' + index}>
                {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <FormControl sx={{ mt: 1, mb: 1 }} variant="standard" required>
          <InputLabel id="color-label">Color</InputLabel>
          <Select
            labelId="filter-color"
            id="color-select"
            label="Color"
            value={color}
            onChange={handleChange}
          >
            {colorsArray.map((item, index) => (
              <MenuItem key={item} value={item} id={"color-option-" + index}>
                {item}
              </MenuItem>
            ))}
          </Select>
        </FormControl>

        <TextField
          sx={{ mt: 1, mb: 1 }}
          id="standard-required"
          variant="standard"
          label="Age"
          required
        />

        <ThemeProvider theme={theme}>
          <Button
            sx={{ mt: 1, mb: 1 }}
            variant="contained"
            color={"secondary"}
            onClick={handleSubmit}
          >
            Add
          </Button>
        </ThemeProvider>
      </div>
    </section>
  );
}

export default AddCatPopup;