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
undefinedfor 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 ...
any thoughts?
