My dialog box component is not Showing in Reactjs - html

Question

I have a component name dialog Box and i want to show it on click over all other components . I have a main component as
class ImageEditor extends Component {
constructor() {
super();
this.state = { images: [], redirect: 'no', imageId: '', isDialogOpen: 'no' };
}
componentDidMount() {
let promise = apiGateway.getImages();
promise.then((images) => {
this.setState({ images: images });
});
}
openDialog = () =>{
this.setState({ isDialogOpen : 'yes' });
}
closeDialog = () =>{
this.setState({ isDialogOpen: 'no' });
}
deleteImage = (id) => {
apiGateway.removeImage(id);
}
setRedirect = (id) => {
this.setState({ redirect: 'yes', imageId: id });
}
renderImage(image,index){
return(
<div key={index}>
<p>Title: {image.title}</p>
<p>Description: {image.description}</p>
<button onClick={(e)=> this.deleteImage(image._id)}>DELETE</button>
<button onClick={(e)=> this.setRedirect(image._id)}>UPDATE</button>
<button onClick={this.openDialog}>SHARE</button>
<img className='image' src={image.link} width='100' height='100' alt='nature'/>
<br/><br/>
</div>
);
}
render() {
const { redirect , isDialogOpen } = this.state;
if(redirect === 'yes'){
return <Redirect to={`/update/${this.state.imageId}`}/>
}
if(isDialogOpen === 'yes'){
<DialogBox /> ????????
}
return(
<div>
<div>{
this.state.images.map((image,index)=>{
return this.renderImage(image,index);
})
}
</div>
</div>
);
}
}
export default ImageEditor;
When a person clicks on SHARE , I want Dialog Box to Open.I donot know the way i am doing i.e loading component with dialogBox is right or wrong. So every Advice or any suggestion will definitely help me. Here is my dialogue component(Right now i am getting a error as :Expected an assignment or function call and instead saw an expression no-unused-expressions)
class DialogBox extends Component {
render() {
return(
<div>
<Dialog title="Dialog Title" modal={true} onClose={this.handleClose} buttons={ [{ text: "Close", onClick: () => this.handleClose() }] }>
<h1>Dialog Content</h1>
<p>More Content. Anything goes here</p>
</Dialog>
</div>
);
}
}

Answer 1

You can do this:
return (
<div>
<insert your other components>
{this.state.isDialogOpen === 'yes' && <DialogBox />}
<div>
)
I'd advise using boolean instead of string for isDialogOpen.