I'm using react-window
to try to generate a list.
With the default row that they use, they create
const Row = ({ index, style }) => (
<div className={index % 2 ? 'ListItemOdd' : 'ListItemEven'} style={style}>
Row {index}
</div>
);
Then they use the default element to create the list like so
<List
className="List"
height={150}
itemCount={1000}
itemSize={35}
width={300}
>
{Row}
</List>
Whats returned is also an object, formed the same way mine is
I am trying to do roughly the same thing.
I am using the List component
<List
className="List"
height={150}
itemCount={20}
itemSize={35}
width={300}>
{renderUsers(users)}
</List>
Where renderUsers(users)
outputs const renderUsers = map((user) => <User user={user} key={user.__id} />);
I am getting an error saying
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `List`.
Whats returned is an object (the problem?) that looks like this
How do I solve this problem?
You need to pass the component as a child for List
, Not a list of elements.
const Row = ({ data, index, style }) => {
const user = data.users[index];
return (
<div style={style}>
<User user={user} key={user.__id} />
</div>
)
};
And
<List
className="List"
height={150}
itemCount={users.length}
itemSize={35}
itemData={{
users,
}}
width={300}>
{Row}
</List>