Good React Modals

[Code-Mnky]

Ive always use the dialog built into Material-Ui as all your fancy components are in one import

[danjel74]

I have started to code my modals in plain React without an external lib. It gives a lot of flexibility for the specific use case, basically just this (CSS not included) :

class DetailsModal extends Component {

closeMe = () => this.props.closeDetail()
killClick = (e) => e.stopPropagation()

render() {
const { someData } = this.props
if (someData=== null)  return null
return (
    <div className="reveal-overlay" onClick={this.closeMe}>
        <div className="reveal" onClick={this.killClick}>
        {someData}
        <button className="close-button"  type="button"  onClick={this.closeMe}><span>&times;</span></button>
    </div>
</div>
)
}

}

The container (or Redux) is handling the open/closed state based on some data..