React - render a component when clicking on a component that is not its child
I'm trying to figure out how to make components interact with each other in React. I have an application with a large component. In it I have 2 components: ParentComponentOne and ParentComponentTwo. In ParentComponentOne, I have a ChildParentOne component. How can I make ParentComponentTwo only when clicking on ChildParent One
App.jsx
import React, { Component } from 'react';
import ParentComponentOne from 'ParentComponentOne';
import ParentComponentTwo from 'ParentComponentTwo';
import './App.css';
class App extends Component {
state = {
show:{
componentTwo: false
}
};
render() {
return (
<div>
<ParentComponentOne />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
export default App;
ParentComponentOne.jsx
import React, { Component } from 'react';
import ChildParentOne from 'ChildParentOne';
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne />
<div>some content</div>
<ChildParentOne />
</div>
);
}
}
export default ParentComponentOne ;
ChildParentOne.jsx
import React, { Component } from 'react';
class ChildParentOne extends Component {
render() {
return (
<div onClick={}>
BTN
</div>
);
}
}
export default ChildParentOne ;
+3
source to share
1 answer
Pass a callback to the ParentComponentOne that would change state show.componentTwo
when the child is clicked:
class App extends Component {
state = {
show: {
componentTwo: false
}
};
childClicked() {
this.setState({
show: {
componentTwo: true
}
})
}
render() {
return (
<div>
<ParentComponentOne childClicked={this.childClicked} />
{this.state.show.componentTwo? <ParentComponentTwo /> : null}
</div>
);
}
}
ParentComponentOne:
class ParentComponentOne extends Component {
render() {
return (
<div>
<ChildParentOne onBtnClick={this.props.childClicked} />
<div>some content</div>
<ChildParentOne onBtnClick={this.props.childClicked} />
</div>
);
}
}
Now just pass that callback in a ChildParentOne
similar way and use it as a prop:
class ChildParentOne extends Component {
render() {
return (
<div onClick={this.props.onBtnClick}>
BTN
</div>
);
}
}
+1
source to share