Pass data from lower to heigher component

Question

Here is my hierarchy

  - AddEmployee component
  - UpdateComponent
  - Home
      * EmployeeItem component

The the employee item component is just a line in a list which contains the many columns holding the employees data, among these columns I have the update column which is an icon redirecting to the update component, how can I pass the data of the employee to the UpdateEmployee component in order to show them and enable modifying them, I can't use the react router history object, because is undefined in the EmployeeItem component since it's not a route and react-router ignore it. Is there a way to do it without using readux, or other state manager, I was thinking about useContext but it's not clear to me how to do it.

I'm using react-router to handle redirection

Does this answer your question? [How to pass data from child component to its parent in ReactJS?](https://stackoverflow.com/questions/38394015/how-to-pass-data-from-child-component-to-its-parent-in-reactjs) — Thales Kenne, Nov 01 '20 at 14:51
I believe your problem is simpler that what you're thinking. I suggest you read a little about Components and Props in the React documentation. https://reactjs.org/docs/components-and-props.html I'll leave a quick solution here anyways. — Thales Kenne, Nov 01 '20 at 21:31

score 0 · Answer 1 · answered Nov 01 '20 at 21:34

To pass data from a parent to a child, just pass it inside the rendering of the component itself. These are called props.

<EmployeeItem name = {Lyes} city = {Lisbon}/>

Then inside your component

const EmployeeItem = props => {
   return (
     <h1>Employee {props.name} is from {props.city}</h1>
   );
}

Pass data from lower to heigher component

1 Answers1