Realizing the Full Flexibility of State in Redux

  1. Find a CSS framework that comes with modals, or write the necessary CSS yourself.
  2. Set up your modal somewhere in the DOM.
  3. Place an event listener on that DOM element after targeting it.
  4. Modify the modal, toggling “is-active,” or the syntax of your CSS framework’s choosing.
  5. Modify the modal again when it’s closed.
state = {
modalToggle: "modal",
deleteId: null
}
<div className={this.state.modalToggle}>   <div className="modal-background"></div>      <div className="modal-card">         <div className="modal-card-head">         <p className="modal-card-title">Are you sure you want to   
delete this dinosaur?</p>
</div> <div className="modal-card-foot"> <div className="buttons has-addons is-centered"> <button className="button" onClick=
{this.handleDelete}>Yes</button>
<button className="button" onClick=
{this.handleModalAway}>No</button>
</div> </div> </div></div>
handleClick = event => {
this.setState({
modalToggle: "modal is-active",
deleteId: event.target.parentElement.id
})
}
handleDelete = event => {
let deleteId = parseInt(this.state.deleteId)
this.props.deleteDinosaur(deleteId)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kaelin Alexander

Kaelin Alexander

Full-Stack Web Developer, Researcher, Editor, LGBTQ+ Media Nerd