React How to Fix Failed Prop Type - Invalid Prop of Type String Expected Object

Failed prop type: Invalid prop `value` of type `number`

value={String(Days)}

or

if(String(Days)){....}

Warning: Failed prop type: Invalid prop `defaultValue` of type `string` supplied to `AutoCompleteSearch`, expected `function`

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.

Warning: Failed prop type: Invalid prop `items[0]` of type `string` supplied to `ImageGallery`, expected `object`

You should pass an object to JSON.parse:

JSON.parse(`{"original": "${URL.createObjectURL(fileObj)}"}`)

Also, you have a typo, the key should be original.



Related Topics



Leave a reply



Submit