I dont know why, why I am having this kind of error MUI: A component is changing the default value state of an uncontrolled Autocomplete after being initialized. To suppress this warning opt to use a controlled Autocomplete. is there anything wrong with my code? please help thanks

LocationSearch.js

const propTypes = {
    defaultValue: PropTypes.String,
    getOptionLabel: PropTypes.func,
    value: '',
}
const defaultProps = {
    defaultValue: '',
    getOptionLabel: () => {},
}

const AutoCompleteSearch = ({
    defaultValue,
    getOptionLabel,
})
....

return(
   <Autocomplete
      defaultValue={defaultValue}
      getOptionLabel={getOptionLabel}
   />
)

//parent

AddUser.js

 import {LocationSearch} from '../../component/LocationSearch.js'

      <LocationSearch
        freeSolo
        getOptionLabel={(option) => option} // the value of option is the name of the company
        defaultValue={threatLocation.title} //same goes with the defaultValue
        value={suggestedLocations.title}

      />

CodePudding user response：

About Prop types:

Given the LocationSearch signature provided in AddUser, you need to change both:

• defaultValue to be a string Per the mui Autocomplete API, it is of type any. Since you seem to infer it to be a string, you should probably change its type in the prop types.

• getOptionLabel to add input parameter and return value. Its signature is defined in mui Autocomplete API like so

Signature: function(option: T) => string

The overall changes look like this:

const propTypes = {
    defaultValue: PropTypes.string,
    getOptionLabel: PropTypes.func,
}

// default string values are up to you
const defaultProps = {
    defaultValue: "",
    getOptionLabel: (option : string) => "",
}

About the uncontrolled state

It's because you're using defaultValue.

In a controlled component, data is handled by the Autocomplete component via callbacks. The alternative is uncontrolled components, where data is handled by the DOM itself. Controlled vs uncontrolled components is discussed in React documentation.

As of your code, MUI Autocomplete Doc says:

The default value. Use when the component is not controlled.

To have controlled Autocomplete component, you should use onOpen, onChange callbacks and remove defultValue. An example can be found in MUI Autocomplete demo:

import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';

const options = ['Option 1', 'Option 2'];

export default function ControllableStates() {
  const [value, setValue] = React.useState(options[0]);
  const [inputValue, setInputValue] = React.useState('');

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : 'null'}`}</div>
      <div>{`inputValue: '${inputValue}'`}</div>
      <br />
      <Autocomplete
        value={value}
        onChange={(event, newValue) => {
          setValue(newValue);
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        sx={{ width: 300 }}
        renderInput={(params) => <TextField {...params} label="Controllable" />}
      />
    </div>
  );
}

Note: you should not remove your questions once they are answered. Even if you have many of them in your post. It confuses future readers.