Insert more than one row material table

Question

I am trying to add more than one row into a mat table so i have a field where the user introduce a number for example: "2"

then i ask if he wants to introduce it as one row or separately if everything is in one row its fine but when i try to add separately it breaks and only introduce one row instead of number written

then loop for and setData() inside the for

const [data, setData] = useState([]);
const json = {
    id: id,
    name: null,
};

const newArr3 = [];
for (let index = 0; index < number; index++) {
    newArr3.push(json);
    postRequest(json);
    setData(newArr3);
}

<MaterialTable
    columns={columns}
    data={data}
    title="Table 2"
    options={{
        exportButton: true,
        filtering: true,
        actionsColumnIndex: -1,
        headerStyle: {
            backgroundColor: '#01579b',
            color: '#FFF'
        },
        rowStyle: {
            backgroundColor: '#EEEEEE',
        }
    }}
/>

I saw by components react tools developer that it introduces 2 objects inside the array data but only display one, maybe because it has the same tabledata {id:0} when it would be: tabledata {id:0} and tabledata {id:1} but i don't know how to do it.

Thanks in advance

Answer 1

Try ty give index of for loop as id .

const newArr3 = [];
for (let index = 0; index < number; index++) {
    const json = {
        id: index,
        name: null
    }
    newArr3.push(json);
    postRequest(json);
    setData(newArr3);
}