Trying to create editCommentModel- getting error undefined

[bostonbachexchange]

What stack are you using?

MERN

What's the problem you're trying to solve?

When I click on the button to show the edit comment model, the app crashes the browser shows: TypeError: Cannot destructure property 'user' of 'props' as it is undefined.

Post any code you think might be relevant (one fenced block per file)

`import React, { useState } from "react";
import { Modal } from 'react-bootstrap'
import CommentForm from "../shared/CommentForm";
import { updateComment } from '../../api/comments'

const EditCommentModal = (props) => {
    const { user, message, show, handleClose, msgAlert, triggerRefresh } = props
    const [comment, setComment] = useState(props.comment)

    const handleChange = (e) => {
        setComment(prevComment => {
            const value = e.target.value 
            const name = e.target.name 

            const updatedComment = {
                [name]: value
            }
            return {
                ...prevComment,
                ...updatedComment
            }
        })
    }
`

`  {
                    message.owner && user && message.owner._id === user._id 
                    ?
                        <>
                            <Button onClick={() => setEditModalShow(true)} className="m-2" variant="warning">
                                Edit Post
                            </Button>
                            <Button onClick={() => removeTheMessage()} className="m-2" variant="danger">
                                Delete Post
                            </Button>
                        </>
                    :
                    <p>you cannot edit this message</p>
                    }
                </Card.Footer>
            </Card>
        </Container>
        <EditMessageModal 
            user={user}
            message={message}
            show={editModalShow}
            updateMessage={updateMessage}
            msgAlert={msgAlert}
            triggerRefresh={() => setUpdated(updated => !updated)}
            handleClose={() => setEditModalShow(false)}
        />`

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

When I click on the button to show the edit comment model, the app crashes the browser shows: TypeError: Cannot destructure property 'user' of 'props' as it is undefined.

What is your best guess as to the source of the problem?

I am passing user into Edit Comment Modal, I am not too sure

What things have you already tried to solve the problem?

compared to NewCommentModel console.log user deleting user from props show user undefined

Paste a link to your repository here https://github.com/bostonbachexchange/project_4_Client https://github.com/bostonbachexchange/project_4_API

[aishcann]

If you take out user from the props destructuring, is it still throwing an error? I'm trying to see if this is specific to user or if it's being weird with all the props.

[bostonbachexchange]

If I take user out of the line it says user is undefined.

[aishcann]

Yes that happened because you are trying to use user in other functionality on the page. Can you comment that functionality out for a sec so you can test this issue with props?

[aishcann]

Not permanently of course just trying to isolate one part so we can test it

[bostonbachexchange]

If I take out user it goes to the next prop: TypeError: Cannot destructure property 'message' of 'props' as it is undefined.

[aishcann]

solved - calling the EditCommentModal in the onClick function instead of the updating the setCommentModal state to true

[bostonbachexchange]

I'm getting the create comment form instead of the update comment form as a modal