title: Pass parameters of a form to a REST API in React
body: <p>I have a REST API and I want to pass multiple value of a form like parameters using JavaScript and ReactJS when I submit the data.</p>
  <p>my problem is send the values of forms in React Hook Forms</p>
  <p>This is my API:</p>
  <pre><code>
  const URL = 'https://localhost:8000'
  
  export const FetchRewards = async (id, serial) =&gt; {
  
   const res = await axios.get(`${URL}/api/public/validate_ticket?serial=${serial}&amp;ticket_id=${id}`);
   if (res.status !== 200) return [];
  
   return res.data;
  };
  </code></pre>
  <p>This my component:</p>
  <pre><code>import { React, useEffect, useState } from 'react'
  import { useForm } from &quot;react-hook-form&quot;
  import { FetchRewards } from '../services/consultAPI'
  
  
  export default function RequestModule() {
    
    const [Ticket, setTicket] = useState(null);
    const [Res, setRes] = useState(null);
    const [TicketDate, setTicketDate] = useState(null);
    const [Rewards, setRewards] = useState([]);
    const [status, verifyStatus] = useState(null)
    const [existRewards, setExistRewards] = useState(false);
  
  const getData = async(id, serial) =&gt; {
      const data = await FetchRewards(id, serial);
      setRes(data);
      setTicketDate(data.ticket.fecha_juega);
      setRewards(data.premios);
      setTicket(data.ticket.ticket);
      verifyStatus(data.ticket.status);
      setExistRewards(true);
    }
  
    useEffect(()=&gt;{
      if(!existRewards) getData();
    },[existRewards])
  
  const{
      register, 
      handleSubmit,
      formState: { errors }
    } = useForm();
  
    const onSubmit = (data) =&gt; {
      console.log(JSON.stringify(data.id))
      console.log(JSON.stringify(data.Serial))
    };
  
    const petitionRequest = () =&gt; {
      &lt;div className=&quot;consulta&quot;&gt;
        &lt;img src={bgConsulta} alt=&quot;consulta&quot;/&gt;
      &lt;/div&gt;
    }
    console.log(onSubmit)
    return (
       &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
         &lt;label&gt;
            &lt;p className=&quot;mini-text padd&quot;&gt;ID&lt;/p&gt;
  
            &lt;input {...register(&quot;id&quot;, { required: true, maxLength: 16 ,pattern: /^\d+$/g })} className=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;ID&quot;/&gt;
  
            {errors.id?.type === 'pattern' &amp;&amp; &lt;p className=&quot;errortext&quot;&gt;&lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt; Only accept numbers&lt;/p&gt;}
            {errors.id?.type === 'required' &amp;&amp; &lt;p className=&quot;errortext&quot;&gt;&lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt; Required&lt;/p&gt;}
  
             &lt;div className=&quot;spacing&quot;&gt;&lt;p className=&quot;mini-text&quot;&gt;Last 5 digits of Serial&lt;/p&gt;
  
             &lt;input {...register(&quot;Serial&quot;, { required: true, maxLength: 5, minLength: 5, pattern: /^\w+$/g })} className=&quot;form-control&quot; type=&quot;text&quot; placeholder=&quot;Serial&quot;/&gt;&lt;/div&gt;
  
             {errors.Serial?.type === 'pattern' &amp;&amp; &lt;p className=&quot;errortext&quot;&gt;&lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt; Onlt text and numbers&lt;/p&gt;}
             {errors.Serial?.type === 'maxLength'  &amp;&amp; &lt;p className=&quot;errortext&quot;&gt;&lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt; Only 5 numbers&lt;/p&gt;}
             {errors.Serial?.type === 'minLength'  &amp;&amp; &lt;p className=&quot;errortext&quot;&gt;&lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt; Only 5 numbers&lt;/p&gt;}
             {errors.Serial?.type === 'required' &amp;&amp; &lt;p className=&quot;errortext&quot;&gt;&lt;i className=&quot;fas fa-exclamation-circle&quot;&gt;&lt;/i&gt; Required&lt;/p&gt;}
                
                &lt;div className=&quot;spacing&quot;&gt;
                  &lt;button className=&quot;btn btn-success submitbtn&quot; type=&quot;submit&quot;&gt;
                    SEND
                  &lt;/button&gt;
                &lt;/div&gt;
                &lt;/label&gt;
              &lt;/form&gt;
  );
  </code></pre>
  <p>In the arrow function of onSubmit console return the ID in a string and the SERIAL in string too, but my problem is trying to pass those values as parameter in the function FetchRewards(id, serial), I trying to do with onClick in the Submit Button, but it returns: <code>xhr.js:210 GET https://localhost:8000/api/public/validate_ticket?serial=undefined&amp;ticket_id=undefined 500 (Internal Server Error)</code> when I click the button</p>