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
)
}
}
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
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.