CODEWITHSUNDEEP
reactjs
JDYoung
JDYoung

Reputation: 13

Passing field value from Child to Parent Component onChange with React

I am working on a project with React for the first time. What I am trying to do is send a Child component's value that is within an input field to a variable in its Parent. More precisely, I would like the value to be transmitted whenever the value in the input field is changed. Here is a basic overview of what I have (simplified):

const Parent = () => {
   
   const handleSubmit = (e) => {
      e.preventDefault();
      // Series of variables to hold the values from Child2
   }
   
   return (
   <div>
      <form onSubmit={handleSubmit}>
         <div>
            <Child1 name="child1"/>
            <Child1 name="child2"/>
         </div>
         <button>Submit</button>
      </form>
   </div>
   );
}

const Child1 = () => {
   
   return (
   <div>
      <Child2 name="childchild1"/>
      <Child2 name="childchild2"/>
      <Child2 name="childchild3"/>
   </div>
   );
}

const Child2 = () => {

   return (
   <div>
      <input type="number" .......></input>
   </div>
   );
}

In brief, my goal is to have the values from the input fields in the component Child2 to be transmitted to some array of values in Parent. That being said, I have looked at multiple ways of lifting up values in React online, but I haven't found something similar to my scenario. What would be the best way of proceeding? Thanks!

Upvotes: 1

Views: 1443

Answers (2)

Chandra Raditya
Chandra Raditya

Reputation: 81

I think you can use useContext feature from react. so it is basically a way to manage state globally and you can share state between deeply nested components. so I'm thinking to make a function on the Parent that can be used from nested child to get value, you can use onChange method for instance

import { createContext, useContext } from "react";

const UserContext = createContext();

const Parent = () => {
  const handleSubmit = (e) => {
    e.preventDefault();
    // Series of variables to hold the values from Child2
  };

  const handleInput = (data) => {
    console.log(`this is data ${data.target.value}`);
  };

  return (
    <UserContext.Provider value={handleInput}>
      <div>
        <form onSubmit={handleSubmit}>
          <div>
            <Child1 name="child1" />
            <Child1 name="child2" />
          </div>
          <button>Submit</button>
        </form>
      </div>
    </UserContext.Provider>
  );
};

const Child1 = () => {
  return (
    <div>
      <Child2 name="childchild1" />
      <Child2 name="childchild2" />
      <Child2 name="childchild3" />
    </div>
  );
};

const Child2 = () => {
  const handleInput = useContext(UserContext);

  return (
    <div>
      <input type="number" onChange={(e) => handleInput(e)}></input>
    </div>
  );
};

export default Parent;

perhaps this link can help you useContext

Upvotes: 2

rnwed_user
rnwed_user

Reputation: 1660

you can send a function from parent to child 1 then to child2, in this case we gonna send this function handleGetDataFromParent={getDataFromParent}

const Parent = () => {
   
   const handleSubmit = (e) => {
      e.preventDefault();
      // Series of variables to hold the values from Child2
   }
   
   const getDataFromParent=(data)=>{
     console.log('DATA from Child2', data)
   }

   return (
   <div>
      <form onSubmit={handleSubmit}>
         <div>
            <Child1 name="child1" handleGetDataFromParent={getDataFromParent}/>
            <Child1 name="child2" handleGetDataFromParent={getDataFromParent}/>
         </div>
         <button>Submit</button>
      </form>
   </div>
   );
}

const Child1 = ({handleGetDataFromParent}) => {
   
   return (
   <div>
      <Child2 name="childchild1" handleGetDataFromParent={handleGetDataFromParent}/>
      <Child2 name="childchild2" handleGetDataFromParent={handleGetDataFromParent}/>
      <Child2 name="childchild3" handleGetDataFromParent={handleGetDataFromParent}/>
   </div>
   );
}

const Child2 = ({handleGetDataFromParent}) => {

   const setNumber=(number)=>{
     handleGetDataFromParent(number)
   }

   return (
   <div>
      <input type="number" onChange={(n)=>setNumber(n)}.......></input>
   </div>
   );
}

Upvotes: 0

Related Questions