How To Defer Rendering Of Select Component From Material-ui

After upgrading to @material-ui/core 4.11.2, I got warnings with my select components. This is happens because data aren't available at the time I'm rendering the select. You can s

Solution 1:

you can try using defaultValue="" in the <Select /> component like this comment on releated issues. https://github.com/mui-org/material-ui/issues/18494#issuecomment-718487022

or if it doesn't work try to provide the default MenuItem if languages data is not available yet. For example

{languages ? (
  languages.map((item, index) => {
    return (
      <MenuItemkey={index}value={item.value}>
        {item.name}
      </MenuItem>
    );
  })) : (
    <MenuItemvalue="en">
      English
    </MenuItem>
  )
}

I used the value="en" and English as the default value, but you can adjust it with any static data.

Solution 2:

seems @vigor akbar answer is also not working, then another way is to delay the rendering of the whole <Select> component. Provide a demo <Select> component until you get the data of languages. And when languages is available then render that required component.

  <FormControl>
    <InputLabelhtmlFor="lang">{localStorage.getItem("lang")}</InputLabel>
    {languages ? (
      <Selectvalue={localStorage.getItem("lang")}
        onChange={(e) => this.changeLng(e.target.value, i18n)}
        inputProps={{ name: "lang", id: "lang" }}>
        {languages.map((item, index) => {
          return (
            <MenuItemkey={index}value={item.value}>
              {item.name}
            </MenuItem>
          );
        })}
      </Select>
    ) : (
       // Default element shown unitl the 'languages' isn't loaded<Selectvalue={"loading"} placeholder="Loading..."><MenuItemvalue="loading">Loading....</MenuItem></Select>
    )}
  </FormControl>