Warning: 'A component is changing an uncontrolled input of type text to be controlled' in React.JS

Question

I'm trying to build full-stack project in using MERN stack. I used react-redux to connect backend server. Everything was working fine until this error "Warning: 'A component is changing an uncontrolled input of type text to be controlled' " and also getting "INTERNAL SERVER ERROR" in console. Please help if know why I'm getting this error?

Here is the file where error has been generated:

    function Form() {
      const [postdata,setPostdata] = useState({creator:'', title:'',message:'',tage:'',selectedFile:''})
    
      const classes = useStyles();
      const dispatch = useDispatch();
    
      const handleSubmit=(e)=>{
          e.preventDefault();
    
          dispatch(createPosts(postdata));
      }
      const clear = () => {
    
      }
    
      return (
        <>
       <Paper className={classes.paper}>
         <form autoComplete='off' noValidate className={`${classes.form} ${classes.root}`} 
          onSubmit={handleSubmit}>
          <Typography variant='h6'>Creating a memory</Typography>
          <TextField name='creator' variant='outlined' label='Creator' fullWidth value={postdata.creator} onChange={(e) => setPostdata({...postdata,creator:e.target.value})} />
          <TextField name='title' variant='outlined' label='title' fullWidth value={postdata.title} onChange={(e) => setPostdata({...postdata,title:e.target.value})} />
          <TextField name='message' variant='outlined' label='message' fullWidth value={postdata.message} onChange={(e) => setPostdata({...postdata,message:e.target.value})} />
          <TextField name='tags' variant='outlined' label='tags' fullWidth value={postdata.tags} onChange={(e) => setPostdata({...postdata,tags:e.target.value})} />
    
          {/* when we want only one obj to change, and rest the same */}
         <div className={classes.fileInput}>
        <FileBase
          type='file'
          multiple={false}
          onDone={({base64}) => setPostdata({...postdata,selectedFile:base64})}
          />
         </div>
         <Button className={classes.buttonSubmit} variant="contained" color="primary" size="large" type="submit" fullWidth>Submit</Button>
         <Button variant="contained" color="secondary" size="small" onClick={clear} fullWidth>Clear</Button>
         </form>
       </Paper>
        </>
      ).
    }

export default Form

the error getting from console:

index.js:1 Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. 
    in input (created by ForwardRef(InputBase))
    in div (created by ForwardRef(InputBase))
    in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
    in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(OutlinedInput))
    in ForwardRef(OutlinedInput) (created by WithStyles(ForwardRef(OutlinedInput)))
    in WithStyles(ForwardRef(OutlinedInput)) (created by ForwardRef(TextField))
    in div (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ForwardRef(TextField))
    in ForwardRef(TextField) (created by WithStyles(ForwardRef(TextField)))
    in WithStyles(ForwardRef(TextField)) (at Form.js:32)
    in form (at Form.js:26)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (at Form.js:25)
    in Form (at App.js:34)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at App.js:33)
    in div (created by ForwardRef(Grid))
    in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
    in WithStyles(ForwardRef(Grid)) (at App.js:28)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at App.js:27)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (at App.js:26)
    in div (created by ForwardRef(Container))
    in ForwardRef(Container) (created by WithStyles(ForwardRef(Container)))
    in WithStyles(ForwardRef(Container)) (at App.js:21)
    in div (at App.js:20)
    in App (at src/index.js:15)
    in Provider (at src/index.js:14)

Please help if you know what's the problem in my code

Answer 1

Just a spelling error. You have tags and tage when you initialize it.

Answer 2

You called tage instead of tags the key of the state. It should be like this:

const [postdata,setPostdata] = useState({creator:'', title:'',message:'',tags:'',selectedFile:''}) 

So, what happened with your code is that the component is initially uncontrolled because you are passing an undefined value to it:

//postdata.tags is undefined
<TextField value={postdata.tags} onChange={(e) => setPostdata({...postdata,tags:e.target.value})} /> 

However when you change the value via the onChange handler you are setting the right name to it so the component becomes controlled.

Docs: https://reactjs.org/docs/uncontrolled-components.html