How to display data dynamically with ant design tables

first please my javascript skill level is not good, but here… I have a table i got from ant.design, im trying to build a frontend with react, so I want to display some data on the table from my database but im finding it had because of the want ant design table is set up.

This is the code

class OrderSummary extends React.Component {
  state = {
    data: null,
    error: null,
    loading: false
  };

  componentDidMount() {
    this.handleFetchOrder();
  }

  handleFetchOrder = () => {
    this.setState({ loading: true });
    authAxios
      .get(orderSummaryURL)
      .then(res => {
        this.setState({ data: res.data, loading: false });
      })
      .catch(err => {
        // if (err.response.status === 404) {
        //   this.setState({
        //     error: "You currently do not have an order",
        //     loading: false
        //   });
        // } else {
          this.setState({ error: err, loading: false });
        // }
      });
  };

    render() {
      const columns = [
        {
          title: 'Number',
          dataIndex: 'number',
          key: 'number',
          render: text => <a>{text}</a>,
        },
        {
          title: 'Event Name',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: 'Event Price',
          dataIndex: 'price',
          key: 'price',
        },
        {
          title: 'Quantity',
          dataIndex: 'quantity',
          key: 'quantity',
        },
        {
          title: 'Total',
          dataIndex: 'total',
          key: 'total',
        },
      
      ];

      const datasource = 
        {data.order_items.map((orderItem, i) => {
        return (
          [
              {
                key: {orderItem.id},
                number: {orderItem.item.title} -{" "},
                name: 32,
                price: 'NGN' {orderItem.item.price} ,
                quantity: {orderItem.quantity},
                total: {data.total},
                
              },
              // {
              //   key: 1,
              //   name: 'John Brown',
              //   age: 32,
              //   address: 'New York No. 1 Lake Park',
              //   tags: ['nice', 'developer'],
              // },
      ];

        return (
            <Layout>
            <div>
                 <PageHeader
                    className="site-page-header"
                    onBack={() => null}
                    title="Order Summary"
                />
                <Table columns={columns} 
                
                dataSource={datasource} />
            </div>
            </Layout>
        )
    }
};

export default OrderSummary;

Note where i commented out, that part works perfectly because thats how it comes from ant.design

This is the error I keep getting

Failed to compile
./src/containers/OrderSummary.js
  Line 95:14:  Parsing error: Unexpected token, expected ","

  93 | 
  94 |       const datasource = 
> 95 |         {data.order_items.map((orderItem, i) => {
     |              ^
  96 |         return (
  97 |           [
  98 |               {

Please help.

Answer

First

It seems you didn’t close correctly your datasource.

After your ] you need ) } ) } ;

Second

You have to add order_items in data in the state, as it’s null and handleFetchOrder is asynchronous. At the time you want to render it will create an error because you try to iterate over a no existing property.

Here a example of what you can try:

In your state declaration:

state = {
      data: {
          order_items: []
      },
      error: null,
      loading: false
};

In your render function:

Add a const to get your state value:

const data = this.state.data;
const datasource = { data.order_items.map((orderItem, i) => { ... })};