React Display Data in React Table

Issue

i have to display the Data coming from Async function in a Table. but it will only 4 Line displayed. enter image description here

i excpected 6 Line. please check the Result in Console.log(result) => enter image description here

my code :

mychange = async () => {
    // Use IPC API to query Electron's main thread and run this method
    const result = await window.api.getNetworkInterfaces()
    var myliste = [];
    
    console.log(result)
    for (const [key, value] of Object.entries(result)) {
        var entryNumber = 0;
        var i =0;
        //console.log(value.lenght)
        value.forEach(entry => {
          console.log(entry.lenght)
         
          myliste[i]={ id: i, selected: false, name: key, email: entry.family,phone:entry.address};
            i++;  
        })
    }
  ;
    this.setState({
        List:myliste
    })
    
  }

can someone help to lose the probleme ?

expected result : enter image description here

Solution

There is a bug in your program. You are replacing your item in the second iteration of Object.entries(result). Your index i is reset to 0 after an iteration.

A suggested fix is the following, by putting the variable i outside the loop.

    var i =0;
    for (const [key, value] of Object.entries(result)) {
        value.forEach(entry => {         
            myliste[i] = { id: i, selected: false, name: key, email: entry.family, phone: entry.address };
            i++;  
        })
    }

Answered By - Andrew Li