1

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 console output of element

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 image of the console output

How do I solve this problem?

IWI
  • 1,528
  • 4
  • 27
  • 47

1 Answers1

4

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>
Arun Kumar M S
  • 173
  • 12