Initial state not being refreshed on Update Modal

[BeccaK8]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

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

If I click an edit button for tomorrow's health date, the form is either filled with today's health date info (if I clicked edit on today first) or empty (if I clicked tomorrow's edit button first). I need to figure out why my edit modal's health date state is not being refreshed when the parent props is refreshed

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

Below are excerpts from the EditHealthDateModal - I think this is causing the edit form to clear out when I click to another date but why isn't it getting the new props.healthDate

const EditHealthDateModal = (props) => {

    const { user, show, handleClose, updateHealthDate, msgAlert, triggerRefresh } = props

    const [ healthDate, setHealthDate ] = useState(props.healthDate)
    const [ updated, setUpdated ] = useState(false)

    const handleModalClose = () => {
        setHealthDate({})
        handleClose()
    }
    useEffect(() => {
        setHealthDate(props.healthDate)
    }, [updated])

    const onSubmit = (evt) => {
        evt.preventDefault()
        updateHealthDate(user, healthDate)
            .then(() => handleModalClose())
            .then(() => {
                msgAlert({
                    heading: 'Oh Yeah!',
                    message: messages.updateHealthDateSuccess,
                    variant: 'success'
                })
            })
            .then(() => setUpdated(prev => !prev))
            .then(() => triggerRefresh())
            .catch(err => {
                msgAlert({
                    heading: 'Oh No!',
                    message: messages.generalError,
                    variant: 'danger'
                })
            })
    }

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

Edit modal form is either empty or populated with today's info

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

Either my state variables or the trigger refresh

What things have you already tried to solve the problem?

Added a useEffect to the EditHealthModal, reset the initial state on the EditModal version of healthDate (which is probably causing the blank form)

Paste a link to your repository here

https://github.com/BeccaK8/health-hub

[BeccaK8]

Making the following change to EditHealthDateModal, the input form default values will update on the second click - not the first click. It takes two to trigger the setHealthDate(props.healthDate) to truly update with the props and rerender

const EditHealthDateModal = (props) => {

    const { user, show, handleClose, updateHealthDate, msgAlert, triggerRefresh } = props
    console.log('props in edit health date modal = ', props)

    const [ healthDateForm, setHealthDateForm ] = useState(props.healthDate)

    console.log('in edithdmodal -> healthDateForm = ', healthDateForm)
    const [ updated, setUpdated ] = useState(false)

    const handleModalClose = () => {
        setHealthDateForm(props.healthDate)
        handleClose()
    }
    useEffect(() => {
        if (props.healthDate._id === healthDateForm._id) {
            setHealthDateForm(props.healthDate)
        }
    }, [updated])

[timmshinbone]

Currently working on this issue with Spenser as well, he pointed this out and I noticed that my modal from the pets app does the same thing. Currently working on a solution for it.