React props passed to child doesn't get passed

Question

I want to send an id to a child but is doesn't go through is logs in the parent but then in the child it logs as undefined. I can't find why it could be that it's a typo but I've been looking so long and I don't see it. I'm hoping a fresh pair of eyes can spot the issue. When I confirm that I want to delete a appoinment I get a 400 bad request.

parent code:

class CalenderModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

      id: this.props.id,

    };
    this.openDeleteAppointment = this.openDeleteAppointment.bind(this);
  }

  openDeleteAppointment() {

    this.setState({
      openDeleteAppointment: true,
    })

  }


  render() {

    return (

      <div className="customModal">

        <div className="modal-header">

          {action === "Update" ?
            <button className="btn modal__button__red" onClick={() => { this.openDeleteAppointment() }}>Delete</button> : ""}
            {console.log("appointment id",this.state.id)}
          {this.state.openDeleteAppointment &&
            <DeleteAppointmentModal appointment={this.state.id} onHide={() => this.setState({ openDeleteClient: false, id: null })} show />}

        </div>

      </div>
    );

  }

}

export default CalenderModal;

child code:

class DeleteAppointmentModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.appointment.id,
        };

    }

    render() {
        const {id} = this.state
        const DELETE_MUTATION = gql`
   mutation DeleteMutation($id:ID! ) {
   deleteAppointment(id:$id) {
     id
   }
 }
     `
     console.log("delete id",this.state.id)
        return (
            <React.Fragment>
                {
                    <Modal
                        {...this.props}
                        size="lg"
                        aria-labelledby="contained-modal-update-client"
                        centered
                    >
                        <Modal.Header closeButton >
                            <Modal.Title id="contained-modal-title-vcenter" className="tittle">Delete Appointment </Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <div className="delete-content">
                                Are you sure you want to delete this appointment?

                            </div>
                        </Modal.Body>
                        <Modal.Footer>
                        <button onClick={() => this.props.onHide() } className="btn no">No</button>
                            <Mutation mutation={DELETE_MUTATION}
                                variables={{id}}>
                                {/* onCompleted={() => this.props.history.push('/')} */}

                                {deleteMutation =>
                                    <button onClick={() => { deleteMutation(); this.props.onHide() }} className="btn yes">Yes</button>


                                }
                            </Mutation>

                        </Modal.Footer>
                    </Modal>

                }
            </React.Fragment>

        );
    }
}

export default DeleteAppointmentModal;

Answer 1

In the DeleteAppointmentModal component constructor use this.props.appointment only. Because you are passing id to the component using JSX code which is wrapped in the curly braces.

Code:

constructor(props) {
        super(props);
        this.state = {
            id: this.props.appointment,
        };

    }