How to remove a component by clicking on another one in React? - reactjs

Question

I'am new to React and I've got a problem. I'm trying to make an app, like Trello clon. So I need to remove a component if I click on the cross of another one.
Here's what I'm trying to do, but definitely it doesn't work. Appreciate any help!
export default class MainPage extends Component{
constructor(props){
super(props);
this.state = {
InputCallState: false
}
this.inputStateHandler = this.inputStateHandler.bind(this);
this.close = this.close.bind(this);
}
inputStateHandler(){
this.setState({
InputCallState: true
});
}
close(){
this.setState({
InputCallState: false
});
}
render(){
return(
<div>
<Link to = '/'><img className = 'icon' src = 'https://s1.iconbird.com/ico/2013/3/635/w176h2521393885387122.png' alt = '' /></Link>
<div onClick = {this.inputStateHandler} className = 'container'>
<span onClick = {this.close} className = "close"></span>
<h1 >Create a board...</h1>
</div>
{this.state.InputCallState ? <AddForm /> : <div></div>}
</div>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

For your close method, stopPropagation since its nested and effects the toggle:
close(e) {
e.stopPropagation();
...
Also, if you don't want an empty div to render, you can instead write
{this.state.InputCallState && <AddForm /> }