setState Warning in child component. Warning: Can only update a mounted or mounting component - reactjs

Question

I have a page which presents a list of projects, when a user clicks on that particular project a view component is called in the render().
Parent :
constructor(props) {
super(props);
this.state = {
showData : [],
view : false,
projectId: ''
};
this.buttonHandler = this.buttonHandler.bind(this);
this.back = this.back.bind(this);
};
// change view state to true to render diff component
buttonHandler(){
this.setState({view:true})
};
back(){
this.setState({view:true})
}
render(){
let compA = (
<Paper>
<List>
<Subheader >New
Projects</Subheader>
{this.state.showData.map(item =>
<div key={item.title}>
<ListItem onClick={()=>
this.buttonHandler()} leftAvatar=
{<Avatar icon={<Wallpaper />} />} primaryText=
"test" secondaryText="test" />
<Divider inset={true} />
</div>
)}
</List>
</Paper>
);
let compB = (
<ReviewProject
back={this.back}/>
);
return(
<div>
{this.state.view?compB:compA}
</div>
);
}
child comp B :
constructor(props) {
super(props);
this.state = {
//some code
};
}
//calls function back from parent which sets state the "view" to false
dismiss() {
this.props.back();
};
When the dismiss() function is called at the child to render back the list component compA, a warning pops out:
Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the compB component.
Is there a way to solve this? and what is a good practice to navigate from one component to the other back and forth

Answer 1

Because actually on first render, it's kind of if compA is rendered, then compB is missing, therefore when the react tries to re-render, it cannot find the missing element.
==> SOLUTION:
render(){
let returnedComp = (
<Paper>
<List>
<Subheader >New Projects</Subheader>
{this.state.showData.map(item =>
<div key={item.title}>
<ListItem onClick={()=>
this.buttonHandler()} leftAvatar=
{<Avatar icon={<Wallpaper />} />} primaryText=
"test" secondaryText="test" />
<Divider inset={true} />
</div>
)}
</List>
</Paper>
);
if (this.state.view) {
returnedComp = (
<ReviewProject back={this.back}/>
);
}
return(
<div>
{returnedComp}
</div>
);
}

Answer 2

You can try using ref also before setting your state as defined below
function(){
if (this.refs.ref)
this.setState({view: true});
}
render() {
return (
<div ref="ref">{this.state.view}</div>
);
}

Answer 3

The solution I found is:
To create a third component called viewProject component to handle the switching between A and B.
class A extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
This is component A
<button onClick={this.props.onGoBClick}>Go to B</button>
</div>
)
}
}
class B extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
This is component B
<button onClick={this.props.onGoAClick}>Go to A</button>
</div>
)
}
}
class ViewContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
view: false,
}
this.goToA = this.goToA.bind(this);
this.goToB = this.goToB.bind(this);
}
goToA() {
this.setState({view: false})
}
goToB() {
this.setState({view: true})
}
render() {
return (
this.state.view ?
<B onGoAClick={this.goToA}/>
:
<A onGoBClick={this.goToB}/>
)
}
}
ReactDOM.render(<ViewContainer />, document.getElementById('app'))