reactjs - Object missing from props in React child component

Question

I am a beginner in React so please be patient with me ))

I have a parent component with two different buttons that trigger a child component which is a Modal that must show different content inside it depending on which button has triggered the Modal. Both components are functional components. The child Modal is supposed to receive the triggering button's value via props from the parent. That button's name is a number that corresponds to an object's index in an array which is defined in the child component.

When I console.log the props, I see that they are passed down to the Modal three times. The first time the button's value does get passed via the props, but then it disappears from the props on the second and third passage and I get an error saying TypeError: Cannot read property 'inf1' of undefined.

I cannot figure out why the props are passing through three times and why the button's value disappears from the props after the first time.

Here is my code:

Parent:

import React, { useState } from "react";
import Container from "react-bootstrap/Container";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import ExperienceModal from "./ExperienceModal";

function Experience() {

    const [modalShow, setModalShow] = useState({
        value: false,
        bname: "0"
    });

    function defineModal(event) {
        event.preventDefault();
        setModalShow({ value: true, bname: event.target.value });
    }

    function hideModal(event) {
        event.preventDefault();
        setModalShow({ value: false, bname: "0" });
    }

    return (

        <Container fluid>
            <Col>
                <Button value="1" onClick={defineModal}>
                    More Information
        </Button>
                {""}
            </Col>
            <Col>
                <Button value="2" onClick={defineModal}>
                    More Information
        </Button>
                {""}
            </Col>
            <ExperienceModal
                onHide={hideModal}
                show={modalShow.value}
                mshow={modalShow.bname}
            />
        </Container>


    );
}

export default Experience;

Child:

import React from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function ExperienceModal(props) {

    const x = props.mshow;
console.log(props.mshow);
    
    const modalContent = [
        {
            inf1: "text0",
            inf2: "comment0",
            inf3: "remark0"
        },
        {
            inf1: "text1",
            inf2: "comment1",
            inf3: "remark1"
        },
        {
            inf1: "text2",
            inf2: "comment2",
            inf3: "remark2"
        }
    ];

    return (

        <Modal
            {...props}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
            animation="true"
            backdrop="static"
        >
            <Modal.Header closeButton>
                <Modal.Title id="contained-modal-title-vcenter">
                    Additional Information
        </Modal.Title>
            </Modal.Header>
            <Modal.Body>
                <h4>Centered Modal</h4>
                <p>{modalContent[x].inf1}</p>
                <p>{modalContent[x].inf2}</p>
                <p>{modalContent[x].inf3}</p>
            </Modal.Body>
            <Modal.Footer>
                <Button onClick={props.onHide} variant="success">
                    Close
        </Button>
            </Modal.Footer>
        </Modal >
    );
}

export default ExperienceModal;

Here is a link to my sandbox: https://201vz.csb.app/

And here is a screenshot from the browser console since the sandbox's console shows only a single prop delivery with the correct button value yet I still get the same error:

Can somebody please HELP, this error is driving me crazy! Thanks.

question from:https://stackoverflow.com/questions/65905980/object-missing-from-props-in-react-child-component

Answer 1

You have called ExperienceModal from multiple components and only passed proper props from Experience

<ExperienceModal
  show={modalShow.value}
  onHide={() => setModalShow({ value: false, bname: "0" })}
  mshow={modalShow}
/>

and not from E1

// mshow is missing here
<ExperienceModal show={modalShow} onHide={() => setModalShow(false)} />

so just add condition to check whether prop is there or not.

//check for mshow
const x = props.mshow ? props.mshow.bname : 0; // default 0 if no props

I have fixed in Sandbox: https://9nfih.csb.app/

Also there are other warnings so consider resolving those