React modal visibility and content toggling based on action clicked
I've kept the Modal Component light opting to pass the events back to the App Component


I believe this is the correct way to make components generic.

&amp;nbsp;


OMG! Use margins instead. :P

I also notice you use the BEM naming scheme to specifically target styles to the component and not wreak havoc globally. To me, this is a big plus.

I notice that you either add or remove the modal depending on modalVisible. Since you're adding and removing the element from the DOM, the modal will pop in and out of existence and you have no room for transition effects. I think you should just leave the modal on the DOM rendered, but initially hidden. Then use modalVisible to toggle the presence of the modal--is-open modifier.

I also would discourage peppering your code with console function calls. It's debugging code, not for production and leaving it there is bad practice. Use breakpoints in the browser's debugger to inspect code.

One trick to still do console.log without ever putting them in your code is to use a conditional breakpoint but with the console.log call as the expression. When the breakpoint is hit, it is evaluated, console.log gets called. But since console.log returns undefined, which is falsy, the breakpoint won't pause.

The Right Way™ to do React apps is for your components to not to hold state... at all. State should be in stores. In your case, you just made your top-level component the holder of state, which is fine for small apps. Should it grow, consider using stores. I heard Redux is the simplest of them all.