ReactJS Form Submission

user_15058391 0
Viewed 2132

I am a newbie in ReactJS and I am making a simple contact manager. In my InputContact component 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 './components/Header/Header'
import InputContact from './components/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;  ```
jsx reactjs javascript
4 Answers

Your setName call is asynchronous. You cannot guarantee that

console.log(name)

right after

setName(e.target.fname.value);
user_85104050

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);
    
}
user_18493580

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);
    
}
.
.
.
user_73441640

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>
user_115619930
Related