Cleanest way to clear a react form after submit

JavaScript
1

I have created a form submit method that works correctly however when I click submit the form data stays in the field boxes. I have added new set state values below the axios post request but now I am getting … is not a function error. What is the cleanest way to clear forms after submit in React? I don’t want to add any more npm’s like Formik or Redux-Form as I have enough already.

Also should the alert submit success message be on the front-end? How would it know if the details are saved correcly?

// state for the current field value
    const [article, setArticle] = useState({
        articleTitle: ``,
        articleTypeID: ``,
        articleContent: ``,
        // photos: undefined,
        userID: props.user.userID,
        error: ``,
    });

    const [photos, setPhotos] = useState({
        photos: null
    })

....... handleChange, useSelector methods etc

function handleSubmitArticle(e: React.FormEvent<HTMLFormElement>) {
        e.preventDefault();
        const formData = new FormData();
        formData.append("articleTitle", article.articleTitle);
        formData.append("articleContent", article.articleContent);
        formData.append("userID", article.userID);
        formData.append("articleTypeID", article.articleTypeID);
        formData.append("photos", photos);
        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        };
        axios.post("http://localhost:5002/api/article/createarticle", formData, config);
       window.render()
    }

..... form input materialUI fields etc

I have been trying to get a window.render function to work as I think this looks the easiest way but I keep getting the “is not a function” error. Do I need to add something to my index.js file for re-rendering windows? (like window.render = () => ).

2

I think I’d need to see more of this file to understand what is happening. Are you using some kind of form library? Where is setArticle defined? This might be easier if you put this in a repo.

3

Please see the part I have added above. Everything works fine apart from the reset and I want to add an alert message to signal that the upload was successful.

4

Please don’t change previous posts on which someone has already commented - it makes for very confusing threads.

In any case, if you have:

    const [article, setArticle] = useState({
        articleTitle: ``,
        articleTypeID: ``,
        articleContent: ``,
        userID: props.user.userID,
        error: ``,
    });

could you do:

    const INITIAL_ARTICLE = {
        articleTitle: ``,
        articleTypeID: ``,
        articleContent: ``,
        userID: props.user.userID,
        error: ``,
    };

    const [article, setArticle] = useState(INTIAL_ARTICLE);

And then later you can just do setArticle(INITIAL_ARTICLE) to clear it?

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.