(ReactJS) Error when looping nested array to create table data

Question

I'm getting stuck here. I have the data like below:

const dummyData= [
    {
        brand: 'volcom',
        first_stock_amount: 100,
        total_income: 20,
        total_expend: 5,
        final_stock_amount: 7,
        expend: [{
            out_date: 1,
            out_amount:2,
        }]
    },
     {
        brand: 'billabong',
         first_stock_amount: 300,
         total_income: 10,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 2,
            out_amount:3
        }]
    },
     {
       brand: 'ripcurl',
         first_stock_amount: 200,
         total_income: 5,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 3,
            out_amount:4
        }]
    },
];

When I rendered it to create table it works just fine.

The result is like this:

Here is the code:

 <Table size="sm" hover responsive bordered>
                        <thead>
                        <tr>
                            <th rowSpan={2}>NO</th>
                            <th rowSpan={2}>BRAND</th>
                            <th rowSpan={2}>FIRST STOCK AMOUNT</th>
                            <th rowSpan={2}>TOTAL INCOME</th>
                            <th colSpan={31}>EXPEND</th>
                            <th rowSpan={2}>TOTAL EXPEND</th>
                            <th rowSpan={2}>FINAL STOCK AMOUNT</th>
                        </tr>
                        {this.createTableDate()}
                        </thead>
                        <tbody>
                        {dummyData.map((row, index) => {
                            return (
                                <tr key={`row-${index}`}>
                                    <td>
                                        {index + 1}
                                    </td>
                                    <td>{row.brand}</td>
                                    <td>{row.first_stock_amount}</td>
                                    <td />
                                    {row.expend.map(childRow => {
                                        return (
                                            this.state.daysInMonth.map((a, i) => {
                                                if (a == childRow.out_date) {
                                                    return <td key={`row-child-${a}`}>
                                                        {childRow.out_amount}
                                                    </td>
                                                } else {
                                                    return <td key={`row-child-${a}`}>
                                                        0
                                                    </td>
                                                }
                                            })

                                        )
                                    })}
                                    <td></td>
                                    <td></td>
                                </tr>
                            );
                        })}
                        </tbody>
                    </Table>

but when I add a new data to expend in dummyData

dummyData= [
    {
        brand: 'volcom',
        first_stock_amount: 100,
        total_income: 20,
        total_expend: 5,
        final_stock_amount: 7,
        expend: [{
            out_date: 1,
            out_amount:2,
        },
{
            out_date: 2,
            out_amount:3,
        }]
    },
     {
        brand: 'billabong',
         first_stock_amount: 300,
         total_income: 10,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 2,
            out_amount:3
        }]
    },
     {
       brand: 'ripcurl',
         first_stock_amount: 200,
         total_income: 5,
         total_expend: 5,
         final_stock_amount: 7,
        expend: [{
            out_date: 3,
            out_amount:4
        }]
    },
];

an error happened.. it's not rendered as per date, but creating like a new cell to the side..

what's wrong here? Maybe its asking before but I cannot find what I'm looking for.

Here is the codesandbox I made

1) Please put your code to jsfiddle.net 2) Make keys at expand.map() different. Like key={`row-child-${a}_out_date`} and key={`row-child-${a}`} — SLCH000
– SLCH000, Commented Jan 17, 2019 at 9:27
@SLCH000 codesandbox.io/s/vw7wzwvr7, done. I already change the key too — danu
– danu, Commented Jan 17, 2019 at 9:32

SLCH000 · Accepted Answer · 2019-01-17 09:51:50Z

1

This is exactly how your code should work.

You write 31 <td />s the amount of time the number of items in expend is. Try rendering dummyData with expend = []

Here is the code with fixed logic and fixed keys https://codesandbox.io/s/88k5ynyqy9

answered Jan 17, 2019 at 9:51

SLCH000

2,2432 gold badges17 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

danu Over a year ago

wow!! thank you so much!!! it's work, so it have to render the data with expend. I see, try to understand ur code now hehe..

Collectives™ on Stack Overflow

(ReactJS) Error when looping nested array to create table data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related