React - clearing an form data after form submit

Question

My React form doesn't clear after submitting the form-data. where is the glitch? I can see form is successfully submitted to the mongoDB database with all the form content but problem is after submitting the value it doesn't clear the input filled.

import React,{useState} from 'react'
import { Paper, Typography, Button } from "@material-ui/core";
import FileBase from "react-file-base64";
import useStyles from "./styles"
import InputField from './InputField';
import { createPost } from "../../redux/actions/postAction";
import {useDispatch} from "react-redux";

const  Form = () =>  {

    const classes = useStyles();
    const dispatch = useDispatch();
    
   
    const [formData, setFormData] = useState({creator : "", title : "", message : "", tags : "", selectedFile : ""});

    const handleSubmit = async (e) => {
        e.preventDefault();
        
        try {

            dispatch(createPost(formData));
            clearForm()
            
        } catch (error) {
            console.log(error);
        }
    }


    const handleChange = (e) => {
        

        setFormData({ ...formData, tags : e.target.value.split(",") ,  [e.target.name] : e.target.value })
        
    }

    const clearForm = () => {

        setFormData({ creator : "", title : "", message : "", tags : "", selectedFile : ""})

   }
  

    return (
        <Paper className={classes.paper}>  
            <Typography variant="h6" align="center">CREATE POST</Typography>
            
            <form onSubmit={handleSubmit}>
            
            <InputField 
                name="creator"
                label="Creator"
                handleChange={handleChange}
                
            
            />
            <InputField 
                name="title"
                label="Title"
                handleChange={handleChange}
                
            /> 
            
            <InputField 
            name="message"
            label="Message"
            handleChange={handleChange}
            
            />

            <InputField 
                name="tags"
                label="Tags"
                handleChange={handleChange}
                
             />
            <FileBase
                type="file"
                multiple={false}
                onDone={ ({base64}) => setFormData({...formData, selectedFile : base64}) }
            />

        <Button className={classes.btn} type="submit" variant="contained" color="primary" size="small" fullWidth>Create Posts</Button>
        
        <Button  variant="contained" color="secondary" size="small" fullWidth onClick={ clearForm }>Clear</Button>
        </form>
        </Paper>
    )
}

export default Form

Consider the following answers on this thread for clearing a form -> https://stackoverflow.com/questions/43922508/clear-and-reset-form-input-fields — Rex Charles, Jul 15 '21 at 19:53

score 0 · Answer 1 · answered Jul 15 '21 at 20:34

0

Try awaiting the dispatch before running clearForm().

EX:

    try {

        await dispatch(createPost(formData));
        clearForm()
        
    } catch (error) {
        console.log(error);
    }
}

answered Jul 15 '21 at 20:34

Y H

492
5
9

React - clearing an form data after form submit

1 Answers1