Can't type in React TextField Input

Question

I have added a simple TextField from Material-UI into my landing page but cannot type in the React input field. I'm not sure what is causing the issue and have double-checked the following issues:

• Proper casing of onChange (not onchange)
• Input value must be the state
• this.state vs state; the former causes a TypeError: Cannot read properties of undefined (reading 'state').
• type="text" vs. type="number"; both options don't allow for typing in the text field

Below is my code for the TextField, declaring state, and handling the change in input field.

 import TextField from '@material-ui/core/TextField';
...
 const [state, setState] = useState({
    ImageNumber: '',
  });

  const handleChange = (event) => {
    setState({
      ...state,
      [event.target.number]: event.target.value,
    });
  };
...
    <TextField label="" number="ImageNumber" type="text" value={state.ImageNumber} variant="outlined" onChange={handleChange} />

Answer 1

 import TextField from '@material-ui/core/TextField';
...
 const [state, setState] = useState({
    ImageNumber: '',
  });

  const handleChange = (event) => {
    setState({
      ...state,
      [event.target.name]: event.target.value,
    });
  };
...
    <TextField label="" name="ImageNumber" type="text" value={state.ImageNumber} variant="outlined" onChange={handleChange} />

Instead of a non-existent <input /> element props number, you can use the name attribute, which shouldn't show undefined.

Answer 2

• Keep state lean ( dont specify state as an object )
• pass event object to handleChange method

 import TextField from '@material-ui/core/TextField';
...
 const [state, setState] = useState("");

  const handleChange = (event) => {
    setState(event.target.value);
  };
...
    <TextField label="" number="ImageNumber" type="text" value={state} variant="outlined" onChange={(e) => handleChange(e)} />