title: Why do i have to press twice on "Submit" button in form to see the logs in react?
body: <p>I want to have &quot;ans&quot; logged in console as soon as I click on the submit button. But the problem is I have to press the submit button twice to see the log. The states like iValue, pValue, nValue, etc. are updated the first time button is clicked though.I came to know that I shouldn't write parseFloat(e.target.value) in onChange event handler. However, the problem still persists. Here is the code snippet. For the record, the formula I am trying to implement is <strong>ans = pValue * (iValue + 1)^nValue</strong></p>
  <pre><code>import React, {useState} from 'react';
  import {Link} from 'react-router-dom';
  import { Col, Button, Form, FormGroup, Label, Input } from 'reactstrap';
  
  export default function FirstComponent() {
      const [pvalue, setPvalue] = useState(0);
      const [ivalue, setIvalue] = useState(0);
      const [nvalue, setNvalue] = useState(0);
      const [ans, setAns] = useState(null);
  
      const submitHandler = (e) =&gt; {
          e.preventDefault();
          let temp = ivalue + 1;
          temp = ((temp ** nvalue)*pvalue).toFixed(2)
          setAns(temp)
          console.log(ans)
      }
  
      return (
        &lt;Form className=&quot;container&quot; onSubmit={submitHandler}&gt;
          &lt;FormGroup row&gt;
            &lt;Label for=&quot;form1&quot; sm={2}&gt;
              P value
            &lt;/Label&gt;
            &lt;Col sm={10}&gt;
              &lt;Input
                type=&quot;text&quot;
                name=&quot;pvalue&quot;
                id=&quot;form1&quot;
                placeholder=&quot;Enter the value of P&quot;
                onChange={(e) =&gt; setPvalue(parseFloat(e.target.value))}
              /&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup row&gt;
            &lt;Label for=&quot;form2&quot; sm={2}&gt;
              I value
            &lt;/Label&gt;
            &lt;Col sm={10}&gt;
              &lt;Input
                type=&quot;text&quot;
                name=&quot;ivalue&quot;
                id=&quot;form2&quot;
                placeholder=&quot;Enter the value of I&quot;
                onChange={(e) =&gt; setIvalue(parseFloat(e.target.value))}
              /&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup row&gt;
            &lt;Label for=&quot;form3&quot; sm={2}&gt;
              N value
            &lt;/Label&gt;
            &lt;Col sm={10}&gt;
              &lt;Input
                type=&quot;text&quot;
                name=&quot;nvalue&quot;
                id=&quot;form3&quot;
                placeholder=&quot;Enter the value of N&quot;
                onChange={(e) =&gt; setNvalue(parseFloat(e.target.value))}
              /&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
          &lt;FormGroup check row&gt;
            &lt;Col sm={{ size: 10, offset: 2 }}&gt;
              &lt;Button&gt;Submit&lt;/Button&gt;
            &lt;/Col&gt;
          &lt;/FormGroup&gt;
          &lt;p style={{ alignItems: &quot;center&quot; }}&gt;
            &lt;Link to=&quot;/&quot;&gt;Go back&lt;/Link&gt;
          &lt;/p&gt;
        &lt;/Form&gt;
      );
  }
  </code></pre>