Breaking News: Grepper is joining You.com. Read the official announcement!

pass data from child to parent react

Add Answer

Clever Cottonmouth answered on March 26, 2020 Popularity 10/10 Helpfulness 4/10

answer pass data from child to parent react

related react parent to child, child to parent data props

related pass data from child component to parent component

related react pass variable from child to parent

related pass element from child to parent react

related pass data from child component to parent component

related pass props from child to parent

related React passing data fom child to parent component

pass data from child to parent react

Comment

//[CHILD]: Received data from parent

import { React, useState } from "react";
const Child = (props) => {
  const [data, setData] = useState("");
  const func = () => {
    props.myFunc(data);
  };
  return (
    <>
      <input
        type="text"
        value={data}
        onChange={(e) => setData(e.target.value)}
      />
      <button onClick={func}>Click</button>
    </>
  );
};
export default Child;


//[PARENT]:create a callback function in parent

import "./styles.css";
import Child from "./child";
export default function App() {
  const receivedData = (data) => {
    console.log(data);
  };
  return (
    <div className="App">
      <Child myFunc={receivedData} />
    </div>
  );
}

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript parent pass-data

Link to this answer
Share Copy Link

Contributed on Aug 31 2022

Clever Cottonmouth

0 Answers Avg Quality 2/10

Closely Related Answers

react parent to child, child to parent data props

Comment

//Parent
export function Parent(){
	const msg = "Hello from parent";
    const [childMsg,setChildMsg] = useState(null);
    
    return(
    	<div>
        	<Child toChild={msg}  fromChild={setChildMsg} />
            <div>{childMsg}</div>
        </div>
    )
}



//Child 
export function Child(props){
	const msg = "Hello from child";
    
    return(
    	<div>
        	{props.toChild}
            {props.fromChild(msg)}
        </div>
    )
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Aug 03 2023

WinMaw

0 Answers Avg Quality 2/10

pass data from child component to parent component

Comment

function App() {
  return (
    <div className="App">
      <GrandParent />
    </div>
  );
}

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  return (
    <>
      <div>{name}</div>
      <Parent setName={setName} />
    </>
  );
};

const Parent = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child setName={params.setName} />
    </>
  );
};

const Child = params => {
  return (
    <>
      <button onClick={() => params.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 08 2021

Inquisitive Ibex

0 Answers Avg Quality 2/10

react pass variable from child to parent

Comment

/To pass data from child to parent component in React:
//Pass a function as a prop to the Child component.
//Call the function in the Child component and pass the data as arguments.
//Access the data in the function in the Parent.

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: bobbyhadz.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Oct 04 2022

Noob Learner

0 Answers Avg Quality 2/10

pass element from child to parent react

Comment

Parent:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

Child:

handleLangChange = () => {
    var lang = this.dropdown.value;
    this.props.onSelectLanguage(lang);            
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: element

Link to this answer
Share Copy Link

Contributed on Mar 26 2020

Sticky Pingu

0 Answers Avg Quality 2/10

pass data from child component to parent component

Comment

import React, { useState } from "react";

let myState = {};

const GrandParent = () => {
  const [name, setName] = useState("i'm Grand Parent");
  myState.name=name;
  myState.setName=setName;
  return (
    <>
      <div>{name}</div>
      <Parent />
    </>
  );
};
export default GrandParent;

const Parent = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Parent")}>
        from Parent
      </button>
      <Child />
    </>
  );
};

const Child = () => {
  return (
    <>
      <button onClick={() => myState.setName("i'm from Child")}>
        from Child
      </button>
    </>
  );
};

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Sep 08 2021

Inquisitive Ibex

0 Answers Avg Quality 2/10

pass props from child to parent

Comment

/* Parent */
	// The Parent creates the function to be used by the Child and
	// whenever the Child calls the function, it is triggered from
	// the Parent.

const Parent = () => {
  const saveProjectFunction = data => {
    // Recieving data(object) from the Child, instead of passing
    // the object to the Child.
    const modData = {
    	id: 1,
      	...data
    }
  	console.log(`From the Parent ${modData}`);
  }
  return(
		<Child onSaveProject={saveProjectFunction}/>
	)
}

// NOTE: YOU CAN'T SKIP INTERMEDIATE COMPONENT
// The way you pass down through each component, is the same way
// You pass up without skipping a component

/* Child */
  // The child basically calls the function from the parent which was
  // pass in as props, but the function lives and is being used in
  // the parent.

const Child = ({ onSaveProject }) => {
  const sendData = () => {
  	const data = {
      	name: "kouqhar",
      	sport: "basketball"
    }
    // Sending the created data(object) to the Parent instead of
    // Recieving data from the Parent.
    onSaveProject(data)
  }
	return(
  		<button onClick={sendData}><button/>
      )
}

// With love @kouqhar

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 15 2022

kouqhar

0 Answers Avg Quality 2/10

React passing data fom child to parent component

Comment

const NoAuthWebsite = ({ login }) => {
  const [userName, setUserName] = useState("");

  return (
    <form onSubmit={() => login(userName)}>
      <input
        placeholder="username"
        required="required"
        onChange={e => setUserName(e.target.value)}
        value={userName}
      />
      <button type="submit">
        submit
      </button>
    </form>
  );
};

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: dev.to

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jul 06 2022

UMIDJON ABDUHOMIDOV

0 Answers Avg Quality 2/10

pass data from child to parent react

Contents

More Related Answers

pass data from child to parent react

Closely Related Answers

react parent to child, child to parent data props

pass data from child component to parent component

react pass variable from child to parent

pass element from child to parent react

pass data from child component to parent component

pass props from child to parent

React passing data fom child to parent component

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.