Show a Modal on react functional component using redux toolkit

Question

I have a dashboard page that shows a table list of all the posts, for each post I have and an edit button.

I'm trying to pop a modal when the edit button is clicked. So I created a Modal component, which is rendered by the Dashboard component (this is a high order component equal to the App compo) and I added a modal slice with redux toolkit and I successfully managed to change the modal state when the edit button is clicked but the modal doesn't show up. I hope that I was thorough enough with what I'm trying to achieve, I also hope that you will help me guys, and now I'll share with you some of the code.

EditPostModal.jsx

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { makeStyles } from '@material-ui/core/styles'
import Modal from '@material-ui/core/Modal'
import editPostSlice, {
  getPostToEditModal,
} from '../../store/slices/editPost'

const useStyles = makeStyles((theme) => ({.....}))

export default function SimpleModal() {
  const classes = useStyles()
  const modal = useSelector(getPostToEditModal)
  const dispatch = useDispatch()
  console.log('HEYYYY', modal) // modal is undefined

  const handleClose = () => {
    dispatch(editPostSlice.actions.closeModal())
  }

  if (!modal) return null

  return (
    <Modal
      className={classes.modal}
      open
      onClose={handleClose}
      aria-labelledby="simple-modal-title"
      aria-describedby="simple-modal-description"
    >
      <h1>I AM THE MODAL</h1>
    </Modal>
  )
}

Temitayo Fadojutimi · Accepted Answer · 2020-12-15 12:32:34Z

1

The first step to debug is to check if the modal will open without redux toolkit slice.

Also, can you confirm that the modal variable always return something other than a falsy value?

answered Dec 15, 2020 at 12:32

Temitayo Fadojutimi

264 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Getsuga Over a year ago

I fixed it, it turns out that the issue was in editPostSlice, I wasn't fetching the modal state correctly.

Collectives™ on Stack Overflow

Show a Modal on react functional component using redux toolkit

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related