React.js pass data between components flow

Question

I have created three basic components.

A renders both the components B and C B is like header containg tabs 1,2,3 C is the first page on which there are two forms, one shows at a time. On showing first form i need to show tab one 1 in B component. On showing second form i need to show tab 3 in B component.

I just want to pass the data from C component on the basis of which form is showing to B component.

I put state on C component and tried to use same this.state.data or this.props.data for no value coming in B controller.

A.jsx

import React from 'react';
import B from './B.jsx';
import C from './C.jsx'
class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            <div>{this.props.show}
                <B />
                <C/>
            </div>
        )
    }
}

export default A;

B.jsx

import React from 'react';

class B extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    }
}

C.jsx

class C extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show : '1',
        }
    }
    render() {
        return (
            //html code here
        )
    }
}

can you show your code, that u tried ??

Mayank Shukla
– Mayank Shukla

2017-01-16 12:31:16 +00:00
Commented Jan 16, 2017 at 12:31 — Mayank Shukla
– Mayank Shukla, Commented Jan 16, 2017 at 12:31
@MayankShukla I added some code to understand.

Rahul Tailwal
– Rahul Tailwal

2017-01-16 12:35:37 +00:00
Commented Jan 16, 2017 at 12:35 — Rahul Tailwal
– Rahul Tailwal, Commented Jan 16, 2017 at 12:35

Amir Hoseinian · Accepted Answer · 2017-01-16 13:20:26Z

10

You will need to add your state to parent component here it would be A component then pass a function to change your states to B and C to change your state on A like below

class A extends React.Component {
    constructor(props) {
        super();
        this.state = {
            show : '1',
        };
    }
    changeShow(show){
        this.setState({show: show});
    }
    render() {
        return (
            <div>{this.props.show}
                <B show={this.state.show}/>
                <C handleChangeShow={this.changeShow.bind(this)} show={this.state.show}/>
            </div>
        )
    }
}

Now you have access to show state in your child components and can change it from them for example in C

class C extends React.Component {
    handleChange({target}){
        this.props.handleChangeShow(target.value)
    }
    render() {
        return (
           <select onChange={this.handleChange.bind(this)}>
                <option value="0">hide</option>
                <option value="1">show</option>
           </select>
        )
    }
}

Now you have access to show state in B

class B extends React.Component {

    render() {
        return (
           {this.props.show}
        )
    }
}

It wasn't clear enough what were you trying to do in your example so I tried to give a example how to pass state between child component in a general sense. I hope it would be useful enough

answered Jan 16, 2017 at 13:20

Amir Hoseinian

2,3622 gold badges24 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahul Tailwal Over a year ago

I got the idea how to props and state works in the parent child here. Thanks

Amir Hoseinian Over a year ago

glade to be of help

Mayank Shukla · Accepted Answer · 2017-01-16 13:11:54Z

1

I tried to create the same scenario that u described, check the jsfiddle for working example.

jsfiddle : https://jsfiddle.net/mj8rsawh/

please comment on this if you want any other help.

answered Jan 16, 2017 at 13:11

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

3 Comments

Rahul Tailwal Over a year ago

can you please describe it once?

Rahul Tailwal Over a year ago

What i understand is add the update function in parent component. Then pass the initial value to the components with the function binding <B show={this.state.show} updateShow={this.updateShow.bind(this)}/> how can i pass two values to it? for example show and hide? Then inside the chlid component use the bind function to update the value and retrieve it all over the three components.

Rahul Tailwal Over a year ago

I got the idea how to props and state works in the parent child here. Thanks

Collectives™ on Stack Overflow

React.js pass data between components flow

2 Answers 2

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related