reactjs transferring the data between two components [duplicate] - reactjs

Question

This question already has answers here:
How to pass data from child component to its parent in ReactJS?
(18 answers)
Pass props to parent component in React.js
(7 answers)
Closed 5 years ago.
In react js I have 2 components.
In Component1.jsx :
import Info from Component2.jsx;
...
...
var dataInfo = "some info.. ";
<Info dataInfo={dataInfo} />
...
...
Here in the above code, we'r transfering the data in the form props from component1.jsx to component2.jsx
In the same fashion can we transfer back to data to component2.jsx to component1.jsx ?
Please help me out here. I'm trying to find the answer in google but couldn't get properly.

Answer 1

Yes you can transfer back to parent component,
i will give you an example to show clearly how you can do that
suppose you have a parent it's called component1 and it have a form imported as a child in it called component2
as the follow:
import React, { Component } from 'react';
export default class Component2 extends Component{
constructor() {
super();
this.state = {
UserName: '',
email: ''
};
this.onSubmit = this.onSubmit.bind(this)
}
onSubmit(e){
e.preventDefault();
var field = {
UserName: this.state.UserName,
email : this.state.email,
password: this.state.password,
}
**this.props.onUpdate(field);**
}
onChange(e){
this.setState({
[e.target.name]: e.target.value
});
}
render() {
var UserNameError = **this.props.UserNameError**;
var emailError = **this.props.emailError**;
return(
<div className="col-md-6 col-sm-6">
<div className="title">Create Account</div>
<Form onSubmit={this.onSubmit}>
<div className="form-group">
<label>user Name</label>
<input onChange={this.onChange.bind(this)} value={this.state.UserName} name='UserName'/>
<span className="error is-visible">{UserNameError}</span>
</div>
<div className="form-group">
<label>Email</label>
<input onChange={this.onChange.bind(this)} value={this.state.email} name='email' />
<span className="error is-visible">{emailError}</span>
</div>
<Button className='btn submit'>Register</Button>
</Form>
</div>
)
}}
import React, { Component } from 'react';
import Component2 from './Component2'
export default class Component1 extends Component{
constructor() {
super();
this.state = {
UserName: '',
email: '',
UserNameError:' UserNameError ',
emailError:' emailError '
};
}
onUpdate(val) {
this.setState({
email: val.email,
UserName: val.UserName,
});
console.log(' onSubmit ** email' + val.email + " UserName " + val.UserName )
};
render() {
return(
<div className="col-md-6 col-sm-6">
<Component2 **UserNameError={this.state.UserNameError}** **emailError={this.state.emailError}** **onUpdate={this.onUpdate.bind(this)}** />
</div>
)
}
}
I put the stars around sentence to notice how I transfer data errors from parent Component1 to component2
and how I send Form data by onUpdate function from child Component2 to Component1