How to pass multiple onChange form data from child to parent element in react-CodePudding

I am trying to print real-time user input from input tags by the user. I am even getting multiple user inputs from the child element to the parent element as a form of an object using useState. But whenever the user tries to fill the second input field, then the first input is re-render and it's replaced by the primary state which is an empty string. code:- Child Element

import React, { useState } from "react";

const Child = (props) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  let userData = {
    name: "",
    age: ""
  };
  const nameChangeHandler = (e) => {
    setName(e.target.value);
    userData.name = e.target.value;
  };

  const ageChangeHandler = (e) => {
    setAge(e.target.value);
    userData.age = e.target.value;
  };

  const formOnChageHandler = (e) => {
    e.preventDefault();
    props.getData(userData);
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };
  return (
    <React.Fragment>
      <form onChange={formOnChageHandler} onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={name}
          onChange={nameChangeHandler}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={age}
          onChange={ageChangeHandler}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

Parent Element

import React, { useState } from "react";
import Child from "./components/Child";

function App() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");
  let userData = (data) => {
    setName(data.name);
    setAge(data.age);
  };
  return (
    <React.Fragment>
      <Child getData={userData} />
      <h1>Your name is:{name}</h1>
      <h1>Your age is:{age}</h1>
    </React.Fragment>
  );
}

export default App;

code sandbox Link- https://codesandbox.io/s/from-traversing-child-to-parent-to-another-child-ynwyqd?file=/src/App.js:0-441

How I can get both data being reflected by using onChange from child to parent element?

CodePudding user response：

I suggest you accumulate the user data in one state.
Like this.

  const [user, setUser] = useState({
    name: "",
    age: null
  });

And put the state on the parent and pass as props, also just have one handleChange function to update both the name and age by the input id

Child.js

import React, { useState } from "react";

const Child = ({ user, setUser }) => {
  const handleChange = (e) => {
    setUser((prev) => ({
      ...prev,
      [e.target.id]: e.target.value
    }));
  };

  const formOnChageHandler = (e) => {
    e.preventDefault();
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };

  return (
    <React.Fragment>
      <form onChange={formOnChageHandler} onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={user.name}
          onChange={handleChange}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={user.age}
          onChange={handleChange}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

App.js

import React, { useState } from "react";
import Child from "./components/Child";

function App() {
  const [user, setUser] = useState({
    name: "",
    age: null
  });

  return (
    <React.Fragment>
      <Child user={user} setUser={setUser} />
      <h1>Your name is:{user.name}</h1>
      <h1>Your age is:{user.age}</h1>
    </React.Fragment>
  );
}

export default App;

CODESANDBOX

CodePudding user response：

Try using the child component as below,

import React, { useState } from "react";

const Child = (props) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  let userData = {
    name: name,  // the value "name" comes for the local state will be listen to the onChange event every time
    age: age  // same applies here as well
  };
  const nameChangeHandler = (e) => {
    setName(e.target.value);
    
  };

  const ageChangeHandler = (e) => {
    setAge(e.target.value);

  };

  const formOnChageHandler = (e) => {
    e.preventDefault();
    props.getData(userData);
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };
  return (
    <React.Fragment>
      <form  onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={name}
          onChange={nameChangeHandler}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={age}
          onChange={ageChangeHandler}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

CodePudding user response：

just use simple one state to manage data. just take a look below example component created from your child component.

we simply use single object state.
use name prop as key to store value in state.

import React, { useState } from "react";

const Child = (props) => {
  const [formData, setFormData] = useState({});
  
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setFormData({
            ...formData,
            [e.target.name]: e.target.value,
        });
    };

  const formOnChageHandler = (e) => {
    e.preventDefault();
    props.getData(userData);
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };
 
  return (
    <React.Fragment>
      <form onChange={formOnChageHandler} onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={name}
          onChange={handleChange}
          name="name"
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={age}
          onChange={handleChange}
          name="age"
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

it happens because you dont watch to the state, try this:

Child.js

import React, { useState } from "react";

const Child = (props) => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  let userData = {
    name,
    age
  };
  const nameChangeHandler = (e) => {
    setName(e.target.value);
    userData.name = e.target.value;
  };

  const ageChangeHandler = (e) => {
    setAge(e.target.value);
    userData.age = e.target.value;
  };

  const formOnChageHandler = (e) => {
    e.preventDefault();
    props.getData(userData);
  };
  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };
  return (
    <React.Fragment>
      <form onChange={formOnChageHandler} onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={name}
          onChange={nameChangeHandler}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={age}
          onChange={ageChangeHandler}
        />
      </form>
    </React.Fragment>
  );
};

export default Child;

CodePudding user response：

Try this, i check in codesandbox and it works:

In App.js:

import React, { useState } from "react";
import Child from "./components/Child";

    function App() {
      const [name, setName] = useState("");
      const [age, setAge] = useState("");
    
      return (
        <React.Fragment>
          <Child name={name} age={age} setName={setName} setAge={setAge} />
          <h1>Your name is:{name}</h1>
          <h1>Your age is:{age}</h1>
        </React.Fragment>
      );
    }
    
    export default App;

In Child.js:

import React, { useState } from "react";

const Child = ({ name, age, setName, setAge }) => {
  const nameChangeHandler = (e) => {
    setName(e.target.value);
  };

  const ageChangeHandler = (e) => {
    setAge(e.target.value);
  };

  const fromOnSubmitHandler = (e) => {
    e.preventDefault();
  };
  return (
    <React.Fragment>
      <form onSubmit={fromOnSubmitHandler}>
        <label htmlFor="name">Name:</label>
        <input
          id="name"
          placeholder="Enter Name"
          value={name}
          onChange={nameChangeHandler}
        />
        <br />
        <label htmlFor="age">Age:</label>
        <input
          id="age"
          placeholder="Enter Age"
          value={age}
          onChange={ageChangeHandler}
        />
      </form>
    </React.Fragment>
  );
};
export default Child;

If you want to improve your code, you can research and use state management like: redux, zustand, react context,...

Hope it useful for you.