title: How to submit form in react using hooks so that it posts the things on the form
body: <p>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:</p>
  <pre><code>import React, {useState} from 'react'
  import DatePicker from 'react-datepicker'
  import &quot;react-datepicker/dist/react-datepicker.css&quot;;
  
  const ProjectForm = () =&gt; {
      const [selectedDate, setSelectedDate] = useState(&quot;&quot;)
      const [newDate, setNewDate] = useState(&quot;&quot;)
      const [values, setValues] = useState({
          projectName: &quot;&quot;,
          address: &quot;&quot;,
          description: &quot;&quot;,
          features: &quot;&quot;,
          technology: &quot;&quot;,
         
      }
      )
      const [amount, setAmount] = useState(&quot;&quot;)
  
      
      const handleChange = (e) =&gt; {
          setValues((values) =&gt; ({
            ...values,
            [e.target.name]: e.target.value,
          }));
        };
      
      const onDatePostedChange = (date) =&gt; {
         setSelectedDate(date)
      }
  
      
      const onDateCompletionChange = (date) =&gt; {
          setNewDate(date)
      }
  
      const onAmountChange = (e) =&gt; {
          const amount = e.target.value;
          if (!amount || amount.match(/^\d{1,}(\.\d{0,2})?$/)) {
              setAmount(amount)
           }
  
       const handleSubmit = (e) =&gt;{
          e.preventDefault()
        
         }
      return (
          &lt;div&gt;
             
              &lt;form onSubmit = {handleSubmit} &gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;projectName&quot;&gt;Project Name:&lt;/label&gt;
                      &lt;input type=&quot;text&quot;
                              name = &quot;projectName&quot;
                          required
                          value={values.projectName}
                          onChange = {handleChange}
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;datePosted&quot;&gt;DatePosted:&lt;/label&gt;
                      &lt;DatePicker
                          className = &quot;datepicker&quot;
                          selected={selectedDate}
                          onChange={onDatePostedChange}
                         required
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;address&quot;&gt;Address:&lt;/label&gt;
                      &lt;input type=&quot;text&quot;
                          name = &quot;address&quot;
                          required
                          value={values.address}
                          onChange = {handleChange}
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;description&quot;&gt;Description:&lt;/label&gt;
                      &lt;textarea
                          required
                          rows=&quot;6&quot;
                          name=&quot;description&quot;
                          value={values.description}
                          onChange = {handleChange}
                      &gt;
                      &lt;/textarea&gt;
            
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;features&quot;&gt;Features:&lt;/label&gt;
                      &lt;textarea
                          required
                          rows=&quot;6&quot;
                          name=&quot;features&quot;
                          value={values.features}
                          onChange = {handleChange}
                      &gt;
                      &lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;tech&quot;&gt;Technologies to be used(Tech Stack):&lt;/label&gt;
                      &lt;textarea
                          rows=&quot;6&quot;
                          required
                          name=&quot;technology&quot;
                          value={values.technology}
                          onChange = {handleChange}
                      &gt;
                      &lt;/textarea&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;time&quot;&gt;Expected date to complete:&lt;/label&gt;
                      &lt;DatePicker
                          className=&quot;datepicker&quot;
                          selected={newDate}
                          onChange={onDateCompletionChange}
                         required
                      /&gt;
                  &lt;/div&gt;
                  &lt;div&gt;
                      &lt;label htmlFor=&quot;amount&quot;&gt;Amount willing to pay:&lt;/label&gt;
                      &lt;input
                          type=&quot;text&quot;
                          required
                          name=&quot;amount&quot;
                          value={amount}
                          onChange={onAmountChange}
                      /&gt;
                  &lt;/div&gt;
                  &lt;button&gt;Add Project&lt;/button&gt;
                  &lt;/form&gt;
                  
          &lt;/div&gt;
      )
  }
  export default ProjectForm
  </code></pre>
  <p>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.</p>