How to submit form in react using hooks so that it posts the things on the form

shutu 0
Viewed 26

I have following form which I want to submit so that it adds following in my project but have no idea how is it done. It would be good if some one would help in out on submitting the form. What should I try so that the form would be submitted. I am using react hooks. My code for ProjectForm.jsx are as follows:

import React, {useState} from 'react'
import DatePicker from 'react-datepicker'
import "react-datepicker/dist/react-datepicker.css";

const ProjectForm = () => {
    const [selectedDate, setSelectedDate] = useState("")
    const [newDate, setNewDate] = useState("")
    const [values, setValues] = useState({
        projectName: "",
        address: "",
        description: "",
        features: "",
        technology: "",
       
    }
    )
    const [amount, setAmount] = useState("")

    
    const handleChange = (e) => {
        setValues((values) => ({
          ...values,
          [e.target.name]: e.target.value,
        }));
      };
    
    const onDatePostedChange = (date) => {
       setSelectedDate(date)
    }

    
    const onDateCompletionChange = (date) => {
        setNewDate(date)
    }

    const onAmountChange = (e) => {
        const amount = e.target.value;
        if (!amount || amount.match(/^\d{1,}(\.\d{0,2})?$/)) {
            setAmount(amount)
         }

     const handleSubmit = (e) =>{
        e.preventDefault()
      
       }
    return (
        <div>
           
            <form onSubmit = {handleSubmit} >
                <div>
                    <label htmlFor="projectName">Project Name:</label>
                    <input type="text"
                            name = "projectName"
                        required
                        value={values.projectName}
                        onChange = {handleChange}
                    />
                </div>
                <div>
                    <label htmlFor="datePosted">DatePosted:</label>
                    <DatePicker
                        className = "datepicker"
                        selected={selectedDate}
                        onChange={onDatePostedChange}
                       required
                    />
                </div>
                <div>
                    <label htmlFor="address">Address:</label>
                    <input type="text"
                        name = "address"
                        required
                        value={values.address}
                        onChange = {handleChange}
                    />
                </div>
                <div>
                    <label htmlFor="description">Description:</label>
                    <textarea
                        required
                        rows="6"
                        name="description"
                        value={values.description}
                        onChange = {handleChange}
                    >
                    </textarea>
          
                </div>
                <div>
                    <label htmlFor="features">Features:</label>
                    <textarea
                        required
                        rows="6"
                        name="features"
                        value={values.features}
                        onChange = {handleChange}
                    >
                    </textarea>
                </div>
                <div>
                    <label htmlFor="tech">Technologies to be used(Tech Stack):</label>
                    <textarea
                        rows="6"
                        required
                        name="technology"
                        value={values.technology}
                        onChange = {handleChange}
                    >
                    </textarea>
                </div>
                <div>
                    <label htmlFor="time">Expected date to complete:</label>
                    <DatePicker
                        className="datepicker"
                        selected={newDate}
                        onChange={onDateCompletionChange}
                       required
                    />
                </div>
                <div>
                    <label htmlFor="amount">Amount willing to pay:</label>
                    <input
                        type="text"
                        required
                        name="amount"
                        value={amount}
                        onChange={onAmountChange}
                    />
                </div>
                <button>Add Project</button>
                </form>
                
        </div>
    )
}
export default ProjectForm

What else would go inside the handleSubmit function so that the form would be submitted and all the inputs like projectname, date, description,features,tech,amount etc would be posted. How to display them in the parent component? I don't know what is needed to be done in parent component as well so that the data from the form is posted. I would be very grateful if someone would teach me this.

react-hooks forms reactjs
1 Answers

I'm not sure what you exactly mean by

"so that the form would be submitted in some another page"

submit is an event and you can use it to do whatever you want with the form data. it tells you that the form data is ready to be collected.

Anyway, if you want to collect the form data to use it in a parent component:

export default function MyComponent(){

const doSomethingWithFrom(formData){
    // ... do whatever u need
}

return (
    <ProjectForm onSubmitForm={doSomethingWithFrom} />
)
}

and change the handleSubmit to:

     const handleSubmit = (e) =>{
        e.preventDefault();
        onSubmitForm(values);
    
   }
Trucker0
Related