react input form returns undefined-CodePudding

it updates only the lastly typed input box value in the state and other are undefined

i get this in console

Object { Name: undefined, Age: "123", City: undefined }

second time

Object { Name: undefined, Age: undefined, City: "city" }

Form.jsx

    import React, {useState} from 'react';

    const Form = (props) => {

    const [formData, setFormData] = useState({ Name:'', Age:'', City:''});


  const infoChange = e => {
    const { name,value} = e.target;
    setFormData({
      [e.target.name]: e.target.value,
    })
  }

  const infoSubmit = e =>{
    e.preventDefault();
    let data={
      Name:formData.Name,
      Age:formData.Age,
      City:formData.City
    }
    props.myData(data);
  }

  return (
    <div className="">
  <form onSubmit={infoSubmit} autoComplete="off">
    <div className="form-group mb-6">
      <label className="">Name:</label>
      <input type="text" onChange={infoChange} name="Name" value={formData.Name} className=""placeholder="Enter Name" />
    </div>
    <div className="form-group mb-6">
      <label className="">City:</label>
      <input type="text" onChange={infoChange} name="City" value={formData.City} className="" 
        placeholder="Enter Age" />
    </div>
    <button type="submit" className="">Submit</button>
  </form>
</div>
  );
};

export default Form;

App.jsx this is App.jsx file, here i get the data prop and display it in console.log

import React from 'react';
import Form from './components/Form';
import Table from './components/Table';


const App = () => {

  const create = (data) => {
    console.log(data);
  }

  return (
    <div className='flex w-full'>
        <div className=''>
            <Form myData={create} />
        </div>
        <div className=''>
            <Table />
        </div>
    </div>
  );
};

export default App;

CodePudding user response：

You're stomping the previous state with the most recent change. If you want to preserve the existing state you have to include it in the update.

setFormData({
  ...formData,
  [e.target.name]: e.target.value,
})

CodePudding user response：

with react-hooks you need to set the entire object again.

 const [formData, setFormData] = useState({ Name:'', Age:'', City:''});


  const infoChange = e => {
    const { name,value} = e.target;
    setFormData({
      // spread the current values here
      ...formData,
      // update the current changed input
      [name]: value,
    })

or, even better IMHO. You have one state for each prop

 const [name, setName] = useState('');
 const [age, setAge] = useState('');
 const [city, setCity] = useState('');

 // ...

 <input onChange={({target: {value}}) => setName(value)} />
 <input onChange={({target: {value}}) => setAge(value)} />
 <input onChange={({target: {value}}) => setCity(value)} />

CodePudding user response：

Change this


  const infoChange = e => {
    const { name,value} = e.target;
    setFormData({...formData
      [e.target.name]: e.target.value,
    })
  }