I am a newbie in ReactJS and I am making a simple contact manager. In my InputContact ponent I take name and email of contact and after submission I store in state variables and pass to parent. To check my state var is updated , i check my console. The problem is that, after I submit the form after giving data, I only see a blank line in console. After again clicking on submit, then I see my input in console.

My question is Why I have to click submit twice , in order to see my state variable getting updated ??

My InputContact.js file

import React from 'react'
import { useState } from 'react';

const InputContact = (props)=>{

const [name, setName] = useState('');
const [email, setEmail] = useState('');


const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

    console.log(name)
 props.addContact(name,email);
    
}   
 
return(
    <>
        <form onSubmit={validateInput}>
            <label>Name
                <input type="text" name='fname' ></input>
            </label>
           <br/>
            <label>Email
                <input type="text" name='femail' ></input>
            </label>
            <button type="submit">Save</button>
        </form>
    </>
)
};
export default InputContact;

My App.js file is

import Header from './ponents/Header/Header'
import InputContact from './ponents/InputContact/InputContact';
import { v4 as uuidv4 } from 'uuid';


function App(){
 const [contacts, setContacts] = useState([]);

 const addContactFn= (name,email)=>{
   setContacts([...contacts, {id:uuidv4(), name:name, email:email}]);
   
 }
 return(
   <>
   <Header />
   <InputContact addContact = {addContactFn}/>
   </>
 )
}
export default App;  ```




   

I am a newbie in ReactJS and I am making a simple contact manager. In my InputContact ponent I take name and email of contact and after submission I store in state variables and pass to parent. To check my state var is updated , i check my console. The problem is that, after I submit the form after giving data, I only see a blank line in console. After again clicking on submit, then I see my input in console.

My question is Why I have to click submit twice , in order to see my state variable getting updated ??

My InputContact.js file

import React from 'react'
import { useState } from 'react';

const InputContact = (props)=>{

const [name, setName] = useState('');
const [email, setEmail] = useState('');


const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

    console.log(name)
 props.addContact(name,email);
    
}   
 
return(
    <>
        <form onSubmit={validateInput}>
            <label>Name
                <input type="text" name='fname' ></input>
            </label>
           <br/>
            <label>Email
                <input type="text" name='femail' ></input>
            </label>
            <button type="submit">Save</button>
        </form>
    </>
)
};
export default InputContact;

My App.js file is

import Header from './ponents/Header/Header'
import InputContact from './ponents/InputContact/InputContact';
import { v4 as uuidv4 } from 'uuid';


function App(){
 const [contacts, setContacts] = useState([]);

 const addContactFn= (name,email)=>{
   setContacts([...contacts, {id:uuidv4(), name:name, email:email}]);
   
 }
 return(
   <>
   <Header />
   <InputContact addContact = {addContactFn}/>
   </>
 )
}
export default App;  ```




   

• javascript
• reactjs
• jsx

4 Answers 4

Your setName call is asynchronous. You cannot guarantee that

console.log(name)

right after

setName(e.target.fname.value);

How you are using state isn't really the normal way. You want to use onChange handlers on the inputs to set the state for each name and email, e.g.

onChange={(e)=> setEmail(e.target.value)}

Then onSubmit of your form should refer to the state variables for name and email, not e.target.value

const validateInput = (e)=>{      
    e.preventDefault();
 props.addContact(name,email);
    
}   

To check the updated value, you can use useEffect hook as

import React from 'react'
import { useState, useEffect } from 'react';

.
.
.
useEffect(() => {
  console.log('Name', name);
}, [name]);

const validateInput = (e)=>{      
    e.preventDefault();
   
    setName(e.target.fname.value);
    setEmail(e.target.femail.value);

 props.addContact(name,email);
    
}
.
.
.   

I do it like this, so the state updates on typing and when you send it, is already updated.

<form onSubmit={validateInput}>
        <label>Name
            <input type="text" name='fname' onChange={e => setName(e.target.value) ></input>
        </label>
       <br/>
        <label>Email
            <input type="text" name='femail'  onChange={e => setEmail(e.target.value) ></input>
        </label>
        <button type="submit">Save</button>
</form>