Reseting react bootstrap’s form after the submit

I have a problem with reseting my Form after I submit it. I tried to do something like document.getElementById("formularz").reset(), but it doesn’t work, neither does doing in the end of handleOnSubmit things like: event.target.title="". It does reset the fields, but when I start writing new data, suddenly in each input there are shown data from previous submit.

My component:

import {Form, Button} from 'react-bootstrap'
import {useState, useRef} from "react"
import {AiOutlineWarning} from 'react-icons/ai'
function BooksForm(props) {
    const axios = require('axios')
    const [book,setBook] = useState({
        title:  props.title ? props.title : '',
        author:  props.author ? props.author : '',
        genre: props.genre ? props.genre : '',
        release_date: props.release_date ? props.release_date : '',
        description: props.description ? props.description : '',
        image_url: props.image_url ? props.image_url: ''



    })

    const [errorMessage, setErrorMessage] = useState('')

    const { title,
        author,
        genre,
        release_date,
        description,
    image_url,
        rating_count} = book;

    const handleOnSubmit = (event) => {
        event.preventDefault();
        const values = [
            title,
            author,
            genre,
            release_date,
            description,
            image_url
            ];
        let errorMessage = '';

        const allFieldsFilled = values.every((field) => {
            const value = `${field}`.trim();
            return value !== '' && value !== '0' && value !== undefined;
        });

        if (allFieldsFilled) {
            if (new Date(release_date) > new Date()) {
                errorMessage='Data nie może być starsza niż dzisiejsza'
                setErrorMessage(errorMessage)
            }
            else {

                const book = {

                    title,
                    author,
                    genre,
                    release_date,
                    description,
                    image_url

                };
                props.handleOnSubmit(book);

                document.getElementById("formularz").reset()
            }
        } else {
            errorMessage = 'Please fill out all the fields.';
        }
        setErrorMessage(errorMessage);
    };



    const handleInputChange = (e) => {
        const name = e.target.name
        const value = e.target.value
        setBook((prev) => ({...prev, [name]: value}));

    }

    const handleOnEdit = (event) => {
        console.log(book)
        event.preventDefault()
        axios.put('http://localhost:5000/api/book/'+props.id,book)
        props.onEdit()

    }




    return (
        <div className="form">
            {errorMessage && <p className="errorMsg"><AiOutlineWarning />{errorMessage}</p>}



           <Form>
                    <Form.Group controlId="nazwa">
                        <Form.Label>Wprowadź tytuł książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="title" value={title} placeholder="Tu wpisz tytuł" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="autor">
                        <Form.Label>Wprowadź autora książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="author" value={author} placeholder="Tu wpisz autora" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="genre">
                        <Form.Label>Wprowadź gatunek książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="genre" value={genre} placeholder="Tu wpisz gatunek" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="releaseDate">
                        <Form.Label>Wprowadź datę powstania książki</Form.Label>
                        <Form.Control className="control-input" type="date" name="release_date" value={release_date} placeholder="Tu wpisz datę powstania" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="description">
                        <Form.Label>Wprowadź opis książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="description" value={description} placeholder="Tu daj opis" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="imageurl">
                        <Form.Label>Wprowadź adres URL do zdjęcia książki</Form.Label>
                        <Form.Control className="control-input" type="text" name="image_url" defaultValue={image_url} placeholder="Tu wprowadź adres URL do zdjęcia" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Form.Group controlId="rating">
                        <Form.Label>Wprowadź ocenę książki</Form.Label>
                        <Form.Control className="control-input" type="number" name="rating_count" defaultValue={rating_count} placeholder="Tu wprowadź ocenę książki" size="30" onChange={handleInputChange} />
                    </Form.Group>

                    <Button type="submit" variant="primary" className="submitButton">Submit</Button>






                </Form>
            


        </div>
    )



}

export default BooksForm;

Answer

setBook({
    title: '',
    author: '',
    //rest of properties should look like that
})

Your form inputs are controlled by your state (as you put each input value to reflect the state property of the same name). In order for your form to reset, you need to set the state with a new object, structured as your current state – only with empty strings as values.

Advertisement

Answer