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, o

Answer 1

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

Answer 2

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.