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
Barcode Scanner for Mobile Phone for Website in Form
React Import: Navigate One Folder Up
Element Implicitly Has an 'Any' Type Because Index Expression Is Not of Type 'Number' [7015]
Recursively Find Keys on an Object
Usestate Hook Not Updating a Value
Javascript Index of for Multiple Values
Removing Currency Symbol and Replacing Comma With Point Using Pure JavaScript
How to Allow Chrome to Access My Camera on Localhost
Render a Table Body in React Using the Map Function
How to Prevent Browser to Re-Set Inputs on Page Refresh
Changing Svg Image Color With JavaScript
Can We Call the Function Written in One JavaScript in Another Js File
Reinitialize Slick Js After Successful Ajax Call
Why Am I Not Able to Add Input Text into My Table
How to Convert Postgresql Time Without Time Zone to Date in JavaScript
Angular 2 Not Updating Until Any Object Is Clicked
How to Replace a String With Square Brackets Using JavaScript Replace Function