Equivalent of FlatList from React Native in React

There is no specific component like it is in react-native to do this kind of stuff, so I usually just use map() to achieve this kind of things.

But if it is reusable you can surely create a List component for yourself so that you don't write map() function each time for the same list.

Kind of like this:

function Item(props) {
   return <li>{props.value}</li>;
}

function MyList(items) {
   return (
    <ul>
      {items.map((item) => <Item key={item.key} value={item} />)}
    </ul>
  );
}

There is a react component called flatlist-react (npm install flatlist-react) that you can use to render lists like:

<FlatList list={[1, 2, 3]} renderItem={item => <li>{item}</li>}/>

It also handles things like sorting, grouping, filtering and layout styling for you.

Project:

https://github.com/ECorreia45/flatlist-react

React-Native works by exposing native Andriod and iOS components via JavaScript.

Android and iOS have their respective ListViews which are internally called when using FlatList.

HTML does not have a list component equivalent to ListViews on iOS and Android.
You could use a library that does this like https://github.com/Flipkart/recyclerlistview or use Array.map to return divs that you want rendered and implement the equivalent scroll logic yourself.

The official react site suggests the react-window and react-virtualized