Reputation: 139
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
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