0
785
ViewsReact does not recognize the `InputProps` prop on a DOM element
Warning: React does not recognize the InputProps prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase inputprops instead. If you accidentally passed it from a parent component, remove it from the DOM element.
I don't understand what I'm doing wrong. And I've seen many similar issues like this. But I couldn't see a proper solution.
<TextField
{...input}
{...rest}
name={input.name}
inputRef={inputRef}
autoFocus={inputRef.current === document.activeElement}
disabled={disabled || false}
multiline={rowCount ? true : false}
style={{
width: "100%",
}}
onChange={(event) => {
input.onChange(event.target.value);
}}
{...(hesapla
? {
onBlur: (e) => {
hesapla({ name: input.name, value: input.value });
},
onKeyDown: (e) => {
if (e.key === "Enter") {
hesapla({ name: input.name, value: input.value });
e.preventDefault();
}
},
}
: {})}
InputProps={{
classes,
...(inputComponent ? { inputComponent: inputComponent } : {}),
...(endAdornment ? { endAdornment: endAdornment } : {}),
}}
inputProps={{
style: {
maxHeight: (rowCount * 16).toString() + "px",
overflow: "auto",
...(rightJustify ? { textAlign: "end" } : {}),
...(!readOnly && hesapla
? { fontWeight: "bold", borderBottom: "2px solid" }
: {}),
},
readOnly: readOnly ? readOnly : false,
}}
></TextField>
1 answers
Answer question0
The problem is with your InputProps object, according to the documentation, it uses an object, you didn't pass a proper object to it.
So, if you want to realize this issue, I suggest you create your InputProps entry as a variable and log it:
const myInputPropsObject = {
classes,
...(inputComponent ? { inputComponent: inputComponent } : {}),
...(endAdornment ? { endAdornment: endAdornment } : {}),
}
console.log(myInputPropsObject)
Note: destruction of an empty object will cause the Uncaught SyntaxError: Invalid or unexpected token issue.
to check it:
const myObject = {
name: 'testName',
...{},
}