Load a Popup Component - reactjs

Question

I am trying to display a detail component in a popup window. My App.js component contains a List component with list of Item component. When click Item component, I want to show a Detail popup. The togglePopup() function is passed from parent List component to child Item then to Detail. Right now, the popup does not show up. Below is my code:
App.js
class App extends Component {
state={ showPopup: false,
selectedItem:'',
Items:[]};
togglePopup=()=> {
this.setState({
showPopup: !this.state.showPopup
});
}
onItemseSelect=(item)=>{
this.setState({selectedItem:item});
};
render(){
const Items=['aa','bb','cc'];
return(
<List
Items={this.state.Items}
onItemSelect={this.onItemSelect}
onClick={this.togglePopup}
/>
{this.state.showPopup ?
<Detail
item={this.state.selectedItem}
closePopup={this.togglePopup.bind(this)}
/>
: null
}
);
}
}
List.js
import React from 'react';
import Item from './Item';
const List=({Items,onItemSelect,onClick})=>{
const renderedList= Items.map(item=>{
return (
<Item key={item.ID} item={item} onItemSelect={onItemSelect} onClick={onClick} />
);
})
return <div>
{renderedList}</div>
}
export default List;
Item.js
import React from 'react';
const Item=({item, onItemSelect,onClick})=>{
return <div onClick={()=>onItemSelect(item)} >
<div class="content">
<div class="header">
{/*display contents*/}
<button onClick={onClick}>View More</button>
</div>
</div>
};
export default Item;
Detail.js
import React from 'react';
const Detail=({item,closePopup})=>{
if (!item){
return <div>loading</div>
}
return (
<div>
<p>
{/*contents here*/}
</p>
<button onClick={()=>closePopup}>close me</button>
</div>);
};
export default Detail;

Answer 1

You have not set state to show popup, do this
onItemseSelect=(item)=>{
this.setState({selectedItem:item, showPopup: true}); //make showPopup to true so that popup get displayed
};
Note: As you are using arrow function, no need to bind this here,
closePopup={this.togglePopup.bind(this)}
You can change this to,
closePopup={this.togglePopup}
Another thing is, don't do this,
<div onClick={()=>onItemSelect(item) togglePopup={togglePopup}} > //This is wrong way to call two functions
<div onClick={()=> {onItemSelect(item); togglePopup;}} > //This is right way to call two functions
If you call togglePopup on every item click, then every time selectedItem:'' will set item to blank and you won't be able to see anything on page
Side note: Detail is a component and not a popup. This component will get display on App component after this.state.showPopup get true value. To show it as popup you must use Modal.