React Array.map not populating table

Question

I have a react component that is supposed to take an array of items passed to the component as a prop and render a table. I have done this successfully with another component already. Yet for some reason, the table does not want to populate rows in this component.

Here is the component that renders the :

class OrderList extends React.Component {
    constructor(props) {
        super(props);

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

    populateTable() {
        return this.props.orders.map((order) => {
            <tr key={order.id}>
                <td>{order.orderNo}</td>
                <td>{order.customer.name}</td>
                <td>{order.customerPO}</td>
                <td>{order.orderDate}</td>
                <td>{order.shipDate}</td>
            </tr>
        });
    }

    render() {
        return(
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <td>Order No.</td>
                        <td>Customer Name</td>
                        <td>Customer P.O.</td>
                        <td>Order Date</td>
                        <td>Ship Date</td>
                    </tr>
                </thead>
                <tbody>
                    {this.populateTable()}
                </tbody>
            </Table>
        );
    }
}

Using react dev tools, I can see that the orders prop does contain the correct data, and array of objects. I can even throw in a console.log line within the forEach loop, so I know the component is actually looping over the data. However, no rows are rendered?

score 2 · Answer 1 · answered Jul 26 '22 at 15:14

Your map is not returning anything this is the reason

    class OrderList extends React.Component {
    constructor(props) {
        super(props);

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

    populateTable() {
        return this.props.orders.map((order) => (
            <tr key={order.id}>
                <td>{order.orderNo}</td>
                <td>{order.customer.name}</td>
                <td>{order.customerPO}</td>
                <td>{order.orderDate}</td>
                <td>{order.shipDate}</td>
            </tr>
        ));
    }

    render() {
        return(
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <td>Order No.</td>
                        <td>Customer Name</td>
                        <td>Customer P.O.</td>
                        <td>Order Date</td>
                        <td>Ship Date</td>
                    </tr>
                </thead>
                <tbody>
                    {this.populateTable()}
                </tbody>
            </Table>
        );
    }
}

when you use curly braces in map you have to use return keyword to return anything

in order to return from your method you can try something like this

populateTable() {
    return this.props.orders.map((order) => {
        return (<tr key={order.id}>
            <td>{order.orderNo}</td>
            <td>{order.customer.name}</td>
            <td>{order.customerPO}</td>
            <td>{order.orderDate}</td>
            <td>{order.shipDate}</td>
        </tr>)
    });
}

React Array.map not populating table

1 Answers1