react material-ui select You have provided an out-of-range value `undefined` for the select component

Question

                    <FormControl
                      size="small"
                      variant="outlined"
                      style={{ width: '100%' }}
                    >
                      <InputLabel>Type</InputLabel>
                      <Select
                        label="type"
                        value={'' || selectValue}
                        onChange={handleChange}
                      >
                        {type?.getCode?.map(option => (
                            <MenuItem key={option.COM_CD} value={option.COM_CD}>
                              {option.COM_CD_NM}
                            </MenuItem>
                          ))
                        )}
                      </Select>
                    </FormControl>

This is the error. (You have provided an out-of-range value undefined for the select component. Consider providing a value that matches one of the available options or ''. The available values are U001, U002. )

In my opinion, unfinished occurred while loading while receiving data called type, which is causing an error. In this case, what should we do? Can I ignore it because it's a warning, not an error?

Answer 1

2 parts to my suggestion.

1. The syntax for the value has a boolean operation. Create a variable or other state to hold the value you want to apply.
2. Also remember that the first time through the render "selectValue" will be undefined.