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

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.

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

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

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

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

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