CODEWITHSUNDEEP
reactjsreact-reduxmaterial-ui
James Gee
James Gee

Reputation: 139

Iterating an array into Material UI datatable

I am trying to iterate a Redux array into a Material UI datagrid and I keep getting errors that my array is empty every time I try to render. The store data loads correctly without the iterating loop however it returns empty whenever I try to populate the table.

Would I best creating a custom method for this or is there an easier fix? I have used this route before but it was on a simpler component.

Error: UserList(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

const columns = [
        { field: 'id', headerName: 'ID', width: 70 },
        { field: 'firstname', headerName: 'First name', width: 130 },
        { field: 'lastname', headerName: 'Last name', width: 130 },
        { field: 'userName', headerName: 'Username', width: 130},
        { field: 'userEmail', headerName: 'Email', width: 180 },
        { field: 'userRole', headerName: 'Role', width: 80}
    ];
    const rows = [
        { id: userLists.userID, lastName: userLists.surname, firstname: userLists.firstName, userName: userLists.username, userEmail: userLists.userEmail, userRole: userLists.userRoleID },
    ];

    return (

        <div style={{ height: 400, width: '100%' }}>
        {userLists.length > 0 &&
         userLists.map(( {userLists}) => {
            <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
     })}
        </div>
    );
}

Upvotes: 0

Views: 1175

Answers (1)

David I. Samudio
David I. Samudio

Reputation: 2693

This is a common mistake using arrow functions, you are missing the return in your map call, or have mistaken the implicit return () with the block expression {}:

{  // checking the array's length is redundant =P,
   // make sure the array has something, though:
   userLists?.map(( {userLists}) => {
       // missing return here: 
       return <DataGrid rows={rows} columns={columns} pageSize={5} checkboxSelection />
     }
   )
}

There is even a tweet about it =P.

Upvotes: 1

Related Questions