Using Map vs. Flatlist in React Native

Question

I'm struggling to properly use .map() on a state object's array to display elements. Here's my code

class EventListFront extends Component {
    state = {
        currentEvent: new event(),
        events: new eventList(),
    }
...
<View>
   {this.state.events.events.map(event => {
        <View key={event.id}>{event.title}</View>})}

</View>

My Event structure is as follows:

class event {
    constructor(
        id = -1,
        name = 'UNSET',
        description = 'UNSET',
        location = 'UNSET',
        ...
        ) {}

(eventList is an array of events, and it redundantly has an identifier 'events')

With this implementation, i have nothing showing when I add to the array. I've tried using a FlatList, but that requires keys/IDs for each element. I'm not sure how to

update the page with the new list when a new event is added
get the elements of events to be displayed in elements using .map()
use the generated ID so that it may properly render with a FlatList instead.

does it matter if I return the innermost view? Or would I need to return another element? @TomSlutsky — Andre
– Andre, Commented Apr 23, 2020 at 15:36

romchambe · Accepted Answer · 2020-04-23 08:53:56Z

2

it seems there are several problems in your code :

as Tom Slutsky commented, you need to return the component in the callback that you pass to your map function. There are several cases for the return value in arrow functions depending on how you write them. Syntax of arrow functions
It seems that you are using always the same id in your events (-1), but when rendering a list of items, React requires to have unique keys for each component. If you update your state with set setState pushing a new item in your events array, your component will be re-rendered and updated.

Regarding the use of Flatlist, they have performance optimizations that are useful if you handle long lists of components. If you use map, all your list will be rendered even though components are not visible on the screen. With Flatlist, only components that are visible are rendered.

answered Apr 23, 2020 at 8:53

romchambe

612 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andre Over a year ago

I've now set my id, so that it can be a unique number, but I think I'm still a bit lost on what to return when using the map. would I return those same innermost view tags with my info, or would I need to use another set of tags? also, I know that the page will update with changes to the component, but I'm not sure if this case follows. Would I have to use forceUpdate to update my list of info, or would it do that automatically? @Romain

romchambe Over a year ago

@Andre, you should write your map function as follows : <View> {this.state.events.events.map(event => ( <View key={event.id}>{event.title}</View> )} </View> Using parenthesis means you are returning an object from your arrow function and what is inside the parenthesis is the object. Or you can do without parenthesis in this case. But if you use curly brackets (as you did) after the arrow, you need to state "return" to tell the map callback what to return in the array. Currently your map function returns undefined I think

Collectives™ on Stack Overflow

Using Map vs. Flatlist in React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related