reactjs transferring the data between two components

Question

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.

Please rephrase your question with a more coherent and complete code snippet. Include enough code so that the structure of your components and the way they're used is evident. — pscl, May 31 '17 at 08:24

Asmaa Almadhoun · Accepted Answer · 2017-06-01T07:23:13.993

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

thanks for your code. I have implemented the same pattern but ending up with error "setState(...): Cannot update during an existing state transition (such as within `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 ? — David, Jun 01 '17 at 06:41
yes, you are right, I updated the code, and you can use the code without any error now, I tried it. by my sorry I forget to set onChange function to take the new value when you write in the input tag, also I found another thing I updated the code using the variable {UserNameError } instead of {this.state.UserNameError } as the same as emailError, — Asmaa Almadhoun, Jun 01 '17 at 07:27
Hi Asmaa, I was refering your code. when the function "onUpdate()" is called in parent class your storing the values in state. for me when I'm strong the values in state in same fashion, the page is re-rendering / refreshing again and again. can u pls suggest me here what might be issue ? — David, Jun 12 '17 at 09:53
welcome again B77, yes i have a solution for you to check firstly if the val from child already you saved in parent or not as the following code, it will prevent refreshing more times. `if(this.state.email != val.email){ this.setState({ email: val.email, UserName: val.UserName, }); } ` — Asmaa Almadhoun, Jun 12 '17 at 12:17
Asmaa, sorry but it's not working. the component is re-rendering again and again.. — David, Jun 12 '17 at 12:25

reactjs transferring the data between two components

1 Answers1