reactjs - How to pass the values from different components using React js

Question

I have Three components like Main.js is the parent components Main.js has two different class components like Employee.js and EmployeeAddress.js.

Both components called from Main.js. I can access parent Main.js properties values from Employee.js as well as EmployeeAddress.js.

I want to get the details from Employee.js properties values to EmployeeAddress.js

For ex. I want to display EmployeeName value into EmployeeAddress.js. if modified EmployeeName textbox value from Employee.js

export default class Main extends React.Component {

constructor(props){
  super(props)
}
render(){
return(
<Employee />
<EmployeeAddress />
);
}

I want to pass values from Employee.js to EmployeeAddress.js Note : Both components are different not having parent and child relationships.

Answer 1

//Main.js:

export default class Main extends React.Component {

constructor(props){
  super(props)
  this.state={
    employee : {
       employeeName: '',
       //otherData
    }
  }
}

function handleEmployeeData(data) {
  this.setState({
    employee: data
  })
}

render(){
  return(
    <Employee handleEmployeeData={this.handleEmployeeData} employee={this.state.employee}/>
    <EmployeeAddress handleEmployeeData={this.handleEmployeeData} employee={this.state.employee}/>
   );
}

//Employee.js or EmployeeAddress.js

Here set new employee data when onChange or onClick happens, this will set the employee data in parent state which both children can use

inside these files' render method you can do something like:

<NameInput* onBlur={e => this.props.handleEmployeeData({...this.props.employee, name: e.target.value})} />

You can do something like this, for any field in employeeData

• Notice NameInput is a placeholder you can replace it with any component you want