Why am I getting a TypeError when trying to run my code?

Question

I'm trying to figure out why I'm getting Cannot destructure property 'id' of 'this.props.customer' as it is undefined. error. My code seems to be correct from the looks of it but despite this fact, I'm still getting the aforementioned error. Is there something minuscule that I'm overlooking?

Here's CustomerList.js file:

import React, { Component } from "react";
import Customer from "./Customer";

class CustomerList extends Component {
    render() {
        const customers = this.props.customers;
        return(
            <div className="data">
                <table className="ui celled table">
                    <thead>
                        <tr>
                            <th style={{ width: '50px', textAlign: 'center' }}>#</th>
                            <th>Name</th>
                            <th>E-mail</th>
                            <th style={{ width: '148px' }}>Action</th>
                        </tr>
                    </thead>

                    <tbody>
                    {
                        customers.map(customer => {
                            return <Customer customer={customer} key={customer.id} />;
                        })
                    }
                        <Customer/>
                    </tbody>
                </table>
            </div>
        );
    }
}

export default CustomerList;

Here's Customer.js:

import React, { Component } from 'react';

class Customer extends Component {
    render() {
        const { id, first_name, last_name, email } = this.props.customer;
        return (
            <tr>
                <td style={{ textAlign: 'center' }}>{id}</td>
                <td>{`${first_name} ${last_name}`}</td>
                <td>{email}</td>
                <td>
                    <button className="mini ui blue button">Edit</button>
                    <button className="mini ui red button">Delete</button>
                </td>
            </tr>
        );
    }
}

export default Customer;

Answer 1

Below the map part you have a single

<Customer/>

This call to the Customer component has no parameters, so customer is undefined. That is why you get the error.