Only rendering a single item

[RUPOJS]

Below is the code which I'm using to integrate your component.

const MyList = ({
virtual,
itemHeight,
}) => (

{virtual.items.map(item => (
<div key={item_${item.id}} style={{height: 240}}>
{item}

))}

);
const MyVirtualList = VirtualList()(MyList);

and after that I'm using 'MyVirtualList' inside my render.
<MyVirtualList items={onwFlightsCopy} itemHeight={240}/>

onwFlightsCopy is a huge list of react elements (>400).

I tried putting some debugger and found out my 'firstItemIndex' and 'lastItemIndex' is always coming as 0 and 1. Can you please let me know why this is being set faulty ?

[developerdizzle]

Hey @RUPOJS, it depends on the size of your window and position of your list. It's possible that only one item is visible during the first render.

You should also be using virtual.style property to set the style for an element around your items. Check out the example here https://github.com/developerdizzle/react-virtual-list#usage, specifically the <ul style={virtual.style}> part.

[developerdizzle]

Looking at this again, it also seems that you're missing a closing </div> tag. With firstItemIndex = 0 and lastItemIndex = 1, I'd expect to see two list items.