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.
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
render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.". That error is occurring when you call onUpdate(val) { this.setState({...}) }. Is there any other way, were we can store the value from onUpdate() function to setState ?
if(this.state.email != val.email){ this.setState({ email: val.email, UserName: val.UserName, }); }