React - value of prop not ready when passed to child component

Question

I have a page that displays the details of a meeting and a button to edit it. The button opens up a modal that has the meeting object passed to it like so:

<AddMeetingModal
    show={isEditing}
    cancel={closeEditModal}
    edit={meeting}
/>

and in the model I have a `useEffect``which checks

useEffect(() => {
        if(props.edit) {
            //Fill input fields with values from meeting object
        } else {
            //Set all fields to blank for adding a new meeting
        }
    }, [props])

The error I'm getting comes when the inputs are trying to be filled cannot read value __ of undefined obviously because on the first page, the meeting isn't loaded right away, so how can I wait for it to be loaded before calling the modal. I've tried using turnery operators, being more specific in the if statement above and just can't wrap my head around it.

Also the meeting initially is being fetched via Redux hence why it isn't loaded intially.

const meetingDetails = useSelector(state => state.meetingDetails)
const { loading, error, meeting } = meetingDetails

useEffect for Modal component

useEffect(() => {
        if(!!props.edit) {
            setMeetingHeld(props.edit.meeting_held)
            setMeetingType(props.edit.meeting_type)
            setAdd1(props.edit.location.address_line_1)
            setAdd2(props.edit.location.address_line_2)
            setAdd3(props.edit.location.address_line_3)
            setTownCity(props.edit.location.town_city)
            setCountyState(props.edit.location.county_state)
            setPostCode(props.edit.location.post_code)
            setCountry(props.edit.location.country)
            setTime(props.edit.meeting_time)
            setHeldWith(props.edit.held_with)
            setDetails(props.edit.details)
            setExistingConnector(props.edit.existing_connector)
            setConnectorComments(props.edit.connector_comments)
            setCompetitor(props.edit.competitor)
            setMeetingReason(props.edit.meeting_reason)
            setFollowUpActions(props.edit.follow_up_actions)
            setFollowUpDate(props.edit.follow_up_date)
        } else {
            setMeetingHeld('scheduled')
            setMeetingType('in_person')
            setAdd1('')
            setAdd2('')
            setAdd3('')
            setTownCity('')
            setCountyState('')
            setPostCode('')
            setCountry('')
            setTime('')
            setHeldWith('')
            setDetails('')
            setExistingConnector(false)
            setConnectorComments('')
            setCompetitor('')
            setMeetingReason('')
            setFollowUpActions('')
            setFollowUpDate('')
        }
    }, [props])

You can a) exit the useEffect function if the props aren't ready b) use conditional rendering in your JSX if other stuff isn't ready — , Apr 29 '21 at 14:59
can you console log props.edit in useEffect and share output here? — Priyank Kachhela, Apr 29 '21 at 15:01
@PriyankKachhela Initially it is an empty object, then when the meeting has been fetched, it is an object containing the meeting data — BranOIE, Apr 29 '21 at 15:13
@BranOIE If it is initially empty and you are checking `!!props.edit` then it will be true because there props.edit is not null or undefined. — Priyank Kachhela, Apr 29 '21 at 15:19
@PriyankKachhela So how can I check if it is not an empty object — BranOIE, Apr 29 '21 at 15:21
Maybe this answer better explains how to check for empty object. https://stackoverflow.com/questions/679915/how-do-i-test-for-an-empty-javascript-object — Priyank Kachhela, Apr 29 '21 at 15:24

score 0 · Accepted Answer · answered Apr 29 '21 at 15:03

0

Try using a Promise that only shows the modal when the meeting is ready. If you don't have the data right away, async is the best way to go about this.

answered Apr 29 '21 at 15:03

Filipe Marques

28
6

I understand what you mean but not sure where to apply the async/await – BranOIE Apr 29 '21 at 15:17

React - value of prop not ready when passed to child component

1 Answers1