Search code examples
javascriptreactjsreact-nativereact-native-flatlist

Equivalent of FlatList from React Native in React


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.


Solution

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