Equivalent of FlatList from React Native in React

avriis picture avriis · Sep 28, 2018 · Viewed 12.1k times · Source

Is there an equivalent of the FlatList component from React Native in React? Having built a mobile app in React Native, I'm now converting it to React for a web app. (Have considered using react-native-web, but have decided against it, mainly because I want to learn React.)

If there isn't an equivalent, I have been thinking about just using map() to render all the items via an Item component that I build, also as demonstrated here in the docs and in this SO question.

Answer

Andrei Olar picture Andrei Olar · Sep 28, 2018

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>
  );
}