CODEWITHSUNDEEP
reactjsreact-native
stuudd
stuudd

Reputation: 369

Is there any component that renders list in ReactJs equivalent to FlatList in react native?

i need a suggestion for how to build a component that reacts the same way as FlatList . Or maybe there is a ready tool to do it in react JS . Here is my simple FlatList of react native :

             <FlatList

             data={this.props.list_data}
             horizontal={false}

             renderItem={this.renderItemList}

             keyExtractor={(item, index) => index.toString() }
             refreshing={this.state.refreshing}
             onRefresh={() => this.props.onRefresh()}
                  / >

Here in react native FlatList it takes data which is an object and renders a list . So how can i do the same behviour with react js list ? when doing like that 

           const listarray = Object.values(this.props.data)
          return (
            <ul >
            {listarray.map(function(item) {
               return <li key={item}>{item}</li>;
                   })}
                </ul>   )

This way i get this error :

          Encountered two children with the same key, `[object Object]`. 
          Keys should be unique so that components maintain their 
          identity 
          across updates. Non-unique keys may cause children to be 
          duplicated and/or omitted — the behavior is unsupported and 
          could change in a future version.

Upvotes: 0

Views: 1070

Answers (1)

Auticcat
Auticcat

Reputation: 4489

In your example you probably have 2 items that are exactly the same.

Just use something else as the key for every single item.

As said by the error, you cannot use the same key for 2 components inside a .map. The simplest way to is to use the index.

 {listarray.map(function(item,index) {
           return <li key={index}>{item}</li>;
               })}

Upvotes: 3

Related Questions