title: Using React Javascript (Form-Onsubmit & calling API not working properly)
body: <p>i am a bit puzzled with the logic when reading the below code, although the code is working but not exactly as i would like it to behave.</p>
  <p>3 queries  i have if some one can please clarify.</p>
  <p>1-  As i understand useEffect is used to invoke the function after render, but in the below code, once the form is sumbitted (onSubmit={credentialVerify}) it will call the credentialVerify() function as below, so i dont think we need useEffect here, but still the code doesnt call the API unless i use the useEffect statement.</p>
  <p>2- Also doesnt wait for me to enter my credentails first and as soon as i go to the Signin page it will fetch the API’s (when using useEffect ) and shows the result in the windows, but i try to design in a way that when i click button then it will fetch the API</p>
  <p>3- when in the form onsubmit call the credentialVerify function, i have console.log(e) but it is showing as undefined, but as i understand onsubmit will call the function and through the event argument by default.</p>
  <p>Below is the snippet of my code.</p>
  <p>Any help Appreciated.</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
      import &quot;../App.css&quot;;
      import { Link } from &quot;react-router-dom&quot;;
  
      function Signin() {
        const [name, setName] = useState(&quot;&quot;);
        const [password, setPassword] = useState(&quot;&quot;);
        const updateName = (e) =&gt; {
          setName(e.target.value);
        };
        const updatePassword = (e) =&gt; {
          setPassword(e.target.value);
        };
        const [items, setItems] = useState([]);
        useEffect(() =&gt; {              //Point-1  useEffect- API not call atall without this statement
          credentialVerify();
        }, []);
        const credentialVerify = async (e) =&gt; {
          console.log(e);                                         //Point-3 this is coming as undefined
          const data1 = await fetch(&quot;http://localhost:5000/api/customers&quot;);
          const incomingdata = await data1.json();
          console.log(data1);
          console.log(incomingdata);
          console.log(name, password);
          setItems(incomingdata);
        };
        return (
          &lt;div&gt;
            &lt;div&gt;
              {
                &lt;form className=&quot;formstyle&quot; onSubmit={credentialVerify}&gt;
                  &lt;input
                    type=&quot;text&quot;
                    placeholder=&quot;Username&quot;
                    name=&quot;username&quot;
                    value={name}
                    onChange={updateName}
                  /&gt;
                            
                  &lt;input
                    type=&quot;text&quot;
                    placeholder=&quot;Password&quot;
                    name=&quot;password&quot;
                    value={password}
                    onChange={updatePassword}
                  /&gt;
                  &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
                &lt;/form&gt;
              }
            &lt;/div&gt;
            &lt;div&gt;
             
              {items.map((entry) =&gt; {
                let key = entry.email;
                let valuefirst = entry.firstName;
                let valuelast = entry.created_at;
              
                return (
                  &lt;p key={key}&gt;
                    {key}: {valuefirst}bb {valuelast}
                  &lt;/p&gt;
                );
              })}
            &lt;/div&gt;
          &lt;/div&gt;
        );
      }
      export default Signin;
  </code></pre>