Search
 
SCRIPT & CODE EXAMPLE
 

JAVASCRIPT

pass data from child to parent react

//[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>
  );
}
Comment

react pass variable from child to parent

/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.

Comment

pass data from child component to parent component

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>
    </>
  );
};
Comment

pass element from child to parent react

Parent:

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

Child:

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

pass data from child component to parent component

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>
    </>
  );
};
Comment

pass props from child to parent

/* 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
Comment

React passing data fom child to parent component

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

PREVIOUS NEXT
Code Example
Javascript :: sample docker for node js 
Javascript :: fetch js 
Javascript :: winston logger creating particular log file for each level 
Javascript :: js increment and decrement function for cart 
Javascript :: delay in javascript without await 
Javascript :: javascript classes and how to import them 
Javascript :: react-native-config 
Javascript :: make object to array javascript 
Javascript :: jquery on scroll 
Javascript :: read json using fs 
Javascript :: placing card on center in angular flex layout 
Javascript :: send csrf token ajax laravel 
Javascript :: discord.js 
Javascript :: loadtest node 
Javascript :: safeAreaProvider 
Javascript :: remove duplicates array.filter 
Javascript :: a.reduce 
Javascript :: for of loop js 
Javascript :: p5js import typescript 
Javascript :: get the value of css pseudo properties js 
Javascript :: javascript debounce 
Javascript :: convert an object to an array 
Javascript :: cubic root javascript 
Javascript :: javascript replaceall 
Javascript :: pass multi variable in ajax 
Javascript :: how to reverse a string in JavaScript using reduce function 
Javascript :: from string to number js 
Javascript :: javascript array group by id 
Javascript :: Orderby on multiple columns using typeorm 
Javascript :: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 
ADD CONTENT
Topic
Content
Source link
Name
5+9 =