not sure how to clear the input fields of my form after clicking select

Question

When I press submit on my form, the data is successfully ported over to a json file however the inputs typed into each field remains visible (it does not go away like normal forms). How can I make the inputs go away after pressing submit?

this is my code I have tried various ways to amend the code including modifying the handleSubmit function but so far nothing seems to work... could appreciate any form of help. Also not too sure how to make a pop up message appear every time I press the submit button.

import React, { useState } from 'react';
import { Select, Textarea, TextInput, Button } from '@mantine/core';
import classes from './Incident.module.css';
import axios from 'axios';
import moment from 'moment';

function Incident() {
  const [loading, setLoading] = useState(false);
  const [success, setSuccess] = useState(false);


  const initialFormData = {
    student_name: '',
    student_contact_no: '',
    student_email: '',
    datetime: '',
    category: '',
    additional_info: '',
    area: ''
  };

  const [formData, setFormData] = useState({ ...initialFormData });

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

  const resetForm = () => {
    setFormData({ ...initialFormData });
  };
  

  const handleSubmit = async () => {
    try {
      setLoading(true); // Set loading to true while the request is in progress
      const form = new FormData()
      form.append("student_name", formData.student_name)
      form.append("student_contact_no", formData.student_contact_no)
      form.append("student_email", formData.student_email)
      form.append("datetime", moment(formData.datetime).format("YYYY-MM-DD hh:mm:ss"))
      form.append("category", formData.category)
      form.append("additional_info", formData.additional_info)
      form.append("area", formData.area)
      const response = await axios.put('/add_incident', form);
  
      if (response.status === 200) {
        // Handle success
        setSuccess(true); // Set success to true
        console.log('Incident created successfully');
        resetForm();
      } else {
        // Handle error
        console.error('Error creating incident');
      }
    } catch (error) {
      // Handle any network or request-related errors
      console.error('Network error', error);
    } finally {
      setLoading(false); // Reset loading to false regardless of success or error
    }
  };
  
  
  const inputContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between', // Adjust the space between input boxes
    marginBottom: '30px', // Add some vertical spacing between input sections
  };

  const marginMidStyle = {
    marginTop: '25px', // Adjust the margin-top value as needed
  };
  

  return (
    <div style={{ paddingTop: '20px' }}>
      <div>
        <h2 style={{ textAlign: 'left' }}>Report a crime :</h2>
      </div>
      <div style={{ ...inputContainerStyle, ...marginMidStyle }}>
        <div style={{ flex: 1, marginRight: '10px' }}>
          <TextInput
            size="md"
            radius="md"
            variant="filled"
            label="Name"
            withAsterisk
            description="Full name as per NRIC"
            placeholder="Name"
            name="student_name"
            onChange={handleInputChange}
          />
        </div>
        <div style={{ flex: 1 }}>
          <TextInput
            size="md"
            radius="md"
            variant="filled"
            label="Contact Number"
            description="Enter your mobile number"
            placeholder="Contact Number"
            name="student_contact_no"
            onChange={handleInputChange}
          />
        </div>
      </div>
      
      <div style={{ ...inputContainerStyle, ...marginMidStyle }}>
        <div style={{ flex: 1, marginRight: '10px' }}>
          <TextInput
            size="md"
            radius="md"
            variant="filled"
            label="Email Address"
            description="Enter your email address"
            placeholder="Email"
            name="student_email"
            onChange={handleInputChange}
          />
        </div> 
        <div style={{ flex: 1 }}>
          <TextInput
            size="md"
            radius="md"
            variant="filled"
            label="Date"
            description="Enter the date of report"
            placeholder="DD/MM/YYYY"
            name="datetime"
            onChange={handleInputChange}
          />
        </div>
      </div>

      <div style={{ ...inputContainerStyle, ...marginMidStyle }}>
        <div style={{ flex: 1, marginRight: '10px'}}>
          <Select
          classNames={{ option: classes.wrapper }}
          size="md"
          radius="md"
          variant="filled"
          label="Crime Category"
          description="Description"
          placeholder="Select"
          data={['Theft', 'Vandalism', 'Peeping Tom', 'Assault']}
          name="category"
          onChange={(e) => {
            setFormData({...formData, category: e})
          }}
        />
        </div> 

        <div style={{ flex: 1}}>
          <Select
          classNames={{ option: classes.wrapper }}
          size="md"
          radius="md"
          variant="filled"
          label="General location of Crime"
          description="Pick where the crime occured"
          placeholder="Select"
          data={['Level 1',
          'Level 2'
          ]
        }
        name="area"
        
        onChange={(e) => {
          setFormData({...formData, area: e})
        }}
        />
        </div> 
      </div>

      <div style={{marginMidStyle,  }}>
        <Textarea
          size="md"
          radius="md"
          label="Detail of crime"
          variant="filled"
          description="Include the relevant details, including to specify the exact location of crime"
          placeholder="Details of crime here (Eg. Description of peeeping tom occuring at 3rd floor toilet)"
          name="additional_info"
          onChange={handleInputChange}
          autosize
          minRows={5}
          maxRows={10}
        />
      </div>

      <Button
      variant="filled"
      onClick={handleSubmit}
      style={{
        position: "absolute",
        bottom: "50px", // Adjust the bottom position as needed
        right: "20px", // Adjust the right position as needed
      }}
>
  Submit
</Button>


    </div>
  );
}

export default Incident;

I am using a matinee core submit button, setting the initial to '' and using

document.getElementById("student_name").value = "";
      document.getElementById("student_contact_no").value = "";
      document.getElementById("student_email").value = "";
      document.getElementById("datetime").value = "";
      document.getElementById("category").value = "";
      document.getElementById("area").value = "";
      document.getElementById("additional_info").value = ""; 

also doesn't seem to work

Answer 1

Your inputs are not controlled (i.e. they don't have a value={...} prop), so resetForm won't do anything.

Either pass it:

<TextInput value={formData.student_name} .../>

Or use a proper <form>, liste to its sumbmit event and call event.target.reset() from it.

Answer 2

You can try this, see if it works!!!

const resetForm = () => {
  setFormData('');
};