Material-UI: is it possible to send an object through a MenuItem?

Viewed 123

I am trying to send an object { language: "english", code: "en" } through a MUI <MenuItem />. If there is a way to successfully implement this? It would save me a lot of busy work creating massive switch statements down the line assigning codes to languages.

Current implement with me trying to pass an object as the first selection:

        <FormControlSelection variant="outlined">
          <InputLabel id="select-language">Language</InputLabel>
          <Select
            labelId="select-language"
            value={lesson.language.language}
            name="language"
            label="Language"
            onChange={handleLanguage}
          >
            <MenuItem value={{ language: "english", code: "en" }}>
              English
            </MenuItem>
            <MenuItem value={"italian"}>Italian</MenuItem>
            <MenuItem value={"spanish"}>Spanish</MenuItem>
          </Select>
          <FormHelperText>What language is the file in?</FormHelperText>
        </FormControlSelection>

Unfortunately, when I try to implement the solution provided above I get the following warning in my console:

Material-UI: You have provided an out-of-range value undefined for the select (name="language") component. Consider providing a value that matches one of the available options or ''. The available values are '[object Object]', 'italian', 'spanish'.

In this example the value does make it to my state ... I have the object successfully updating there for languages ... but my input appears as an empty select as shown below ...

enter image description here

any thoughts?

0 Answers
Related