Build a simple react modal component - Part 1

In this episode we will build a simple react modal dialog component from scratch. We will use the same project that we used for InputTag component.

Please note the component series of tutorials assume basic knowledge of ReactJS and ES6.

My Favorite Books:

Summary:
- Learn about basic modal component creation
- Use of PropTypes

The source code is available at

The react input tag component video is here

[deindedawodu]

Thank you so much for helping me get over a big hump in another tutorial that left me stranded. You cleared many things up! Keep up the great work!!

[bharathreddy]

Thanks, very well explained.Please release the second part of this vedio.

[WanderingBackpacker]

Awesome this was very helpful, you are a life saviour

[vaishalinarayan]

Great video and explained really well. Please post more ReactJS videos

[jamilweeks]

Great video. This worked for me. However, is there a way to make a reusable app with this? I'm doing my portfolio page and created divs for all my apps and I'd love to click on the button on one app that pulls up a modal with the skills for that app. This code works but if you have multiple modals that you want unique content in each and only want to pull up one modal at a time, it doesn't work.

[nakturnal]

why use this
onClose = event => { this.props.onClose && this.props.onClose(event);};
<button onClick={event => {this.onClose(event);}}>
instead of
<button - without event and checking аvailability of onClose props . If we see close button it means that modal is visible and if modal is visible onClick prop must be .
What do you think ?