Using an object as a value with Material UI select and displaying text when chosen

Question

I'm using an api, and mapping the data to create a grid of drop down options (Material UI select). There should be two values recorded when the value changes.

I've created an object that has all of the fields in it, which changes when the user changes a select. The only issue is that the select field doesn't show what is currently selected, but if you look at the object, it is clearly changing.

How do I get the current value for each select to show?

In the following code, test is meant to replicate the length of the array returned from the API

import * as React from 'react';
import Box from '@mui/material/Box';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';
import Typography from '@mui/material/Typography';

export default function BasicSelect() {
  const test='123456';

  const getDefaultSelect = () => {
    let selectArray=[]
    for (let i=0;i<test.length;i++){
      selectArray= [...selectArray,{ qty: 1, qtyUri: 'unit', qtyLabel: 'unit' }]
    }
    return selectArray
  }

  React.useEffect(() => {
    setSelectValues(getDefaultSelect())
  }, []);

  const [selectValues, setSelectValues] = React.useState([])


  const handleSelectChange = (index, eventData) => {
    const newValues = [...selectValues]
    newValues[index]={...newValues[index], qtyUri: eventData.qtyUri, qtyLabel: eventData.qtyLabel}
    setSelectValues(newValues)
  }


  return (
    <Box sx={{ minWidth: 120 }}>

      {selectValues.map((selectValue, index) => (
        <Select
          value={{qtyUri:selectValue.qtyUri, qtyLabel:selectValue.qtyLabel}}
          onChange={(eventData) => handleSelectChange(index, eventData.target.value)}
        >
          <MenuItem value={{qtyUri:'unit', qtyLabel:'Whole'}}>Whole</MenuItem>
          <MenuItem value={{qtyUri:'gram', qtyLabel:'g'}}>g</MenuItem>
          <MenuItem value={{qtyUri:'ounce', qtyLabel:'Oz'}}>Oz</MenuItem>
        </Select>
      ))}
      
        <Typography>
        {JSON.stringify(selectValues,null,2)}
        </Typography>
    </Box>
  );
}

LutherW · Accepted Answer · 2022-02-13 19:34:38Z

You can't use the same state for your map that create the 6 select and the state for the selecting value, because you need to give a unique object to your Select value. I explain : the mechanic for the Select is compare the value selected with the value of the select item to show the element. If you give an Array of items, he says that the comparaison ArrayAllItems and one Item is not equivalent and he creates warning and show nothing.

Example code :

import * as React from "react";
import Box from "@mui/material/Box";
import MenuItem from "@mui/material/MenuItem";
import Select from "@mui/material/Select";
import Typography from "@mui/material/Typography";

const secondTest = [



{ qtyUri: "gram", qtyLabel: "g" },
  { qtyUri: "gram", qtyLabel: "g" },
  { qtyUri: "ounce", qtyLabel: "Oz" },
];

export default function BasicSelect() {
  const [alls, setAlls] = React.useState([]);

  React.useEffect(() => {
    setAlls(getDefaultSelect());
  }, []);

  const test = "123456";

  const getDefaultSelect = () => {
    let selectArray = [];
    for (let i = 0; i < test.length; i++) {
      selectArray = [...selectArray, { qty: 1, qtyUri: "gram", qtyLabel: "g" }];
    }
    return selectArray;
  };

  return (
    <Box sx={{ minWidth: 120 }}>
      {alls.map((element, id) => (
        <SelectComponent key={id} defaultValue={element} />
      ))}
    </Box>
  );
}

const SelectComponent = ({ defaultValue }) => {
  const [selectValue, setSelectValue] = React.useState(defaultValue);

  return (
    <Select
      value={selectValue}
      onChange={(eventData) => setSelectValue(eventData.target.value)}
    >
      {secondTest.map((item) => (
        <MenuItem key={item.qtyUri} value={item.qtyLabel}>
          {item.qtyLabel}
        </MenuItem>
      ))}
    </Select>
  );
};

Thanks, I solved by adding this to the select: renderValue={(item) => item.qtyLabel}

Collectives™ on Stack Overflow

Using an object as a value with Material UI select and displaying text when chosen

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related