Error

select의 value가 ''인 경우를 처리해줘야 한다는 에러

MUI: You have provided an out-of-range value '' for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are ``

해결

before

기존에는 props로 받아온 값을 바로 state값으로 넣어줬다.

const [tempId, setTempId] = useState(templateId)

...

<FormControl style={{ minWidth: 200 }} size="small">
    <InputLabel>Select template</InputLabel>
    <Select
        value={tempId}
        label="Select template"
        onChange={(newValue) =>
            setTempId(newValue.target.value)
        }
        key={tempId}
    >
        <MenuItem value="">
            <em>None</em>
        </MenuItem>
        {templateList.map((template, index) => (
            <MenuItem
                key={template.templateId}
                value={template.templateId}
            >
                {template.templateName}
            </MenuItem>
        ))}
    </Select>
</FormControl>

after

state 값은 '' 로 하고, useEffect에서 setState로 값을 넣어줬다. warning이 사라졌다.

const [tempId, setTempId] = useState('')

const getTempList = async () => {
  	// do something ...
  
    setTempId(templateId)
}

useEffect(() => {
    getTempList()
}, [])

...

<TextField
    select
    label="Select Template"
    value={tempId || ''}
    onChange={(newValue) =>
        setTempId(newValue.target.value)
    }
    size="small"
>
    <MenuItem value="">
        <em>None</em>
    </MenuItem>
    {templateList.map((template) => (
        <MenuItem
            key={template.templateId}
            value={template.templateId}
        >
            {template.templateName}
        </MenuItem>
    ))}
</TextField>