Question 262889 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to create table rows dynamically in react

I’m trying to create a table with rows and columns dynamically from an array.
My rest request is working fine and i have an hard coded example with entries but when changing this to a dynamic approach with loop or map it gets me nuts.

return {
    columns: [
      { Header: "Mitglied", accessor: "name", width: "45%", align: "left" },
      { Header: "Rolle", accessor: "function2", align: "left" },
      { Header: "Status", accessor: "status", align: "center" },
      { Header: "Seit", accessor: "employed", align: "center" },
      { Header: "action", accessor: "action", align: "center" },
    ],

    rows: [
      {
        name: <User image={team2} name={users[0].firstName} email="[email protected]" />,
      },
      {
        name: <User image={team2} name={users[1].firstName} email="[email protected]" />,
      },
    ],
  };
}

But i dont get it running with my loop approach.

    rows: [
      users.forEach(function (user) {
        '{
          name: <User image={team2} name={user.firstName} email="[email protected]! />,
        },'     
      });
    ],
  };
}

What is my fault?

Tags:

2

Answers


  1. 0

    DO not push strings in the rows array

    let rows=[]

users.map((user)=>{
    rows.push({
        name: <User image={team2} name={user.firstName} email="[email protected]! />
    })
})
    Login or Signup to reply.
  2. 0

    You don’t get the expected result because forEach doesn’t return anything, and you’re not doing anything with the data inside your loop.

    The functional approach would be to use map so it returns an array like below

    {
  rows: users.map((user) => ({
    name: <User image={team2} name={user.firstName} email="[email protected]!" />
  })
}

    The map function returns an array, so you don’t need to worry about managing the array yourself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search