React Native: map function in return

Question

I just started getting into react native and I was wondering on how to treat map functions within the return.

Based on the answer given here Using react props in .map function I adapted my code as its following:

render()
{
    const { active } = this.state

    const drawerContent = Object.keys(drawerItems).map(section => {
        return <DrawerComponent.Section key={section.toLowerCase()} title={section} style={styles.section}>
                {drawerItems[section].map(item =>
                    <DrawerComponent.Item
                        key={item.id}
                        label={item.label}
                        icon={item.icon}
                        style={styles.item}
                        active={active === item.id}
                        onPress={() => nav.push(item.screen + 'Screen', item.props || {})}
                    />
                )}
            </DrawerComponent.Section>
    })

    return(<View style={styles.container}>{drawerContent}</View>)
}

Is this the best approach or can anything be better optimized?

score 0 · Accepted Answer · answered Mar 19 '19 at 18:35

0

It looks good to me. I would consider using Object.entries instead of Object.keys, though.

answered Mar 19 '19 at 18:35

Rusty Shackelford

161
2
11

1

Thanks! Challenging though. Different sources suggest different approaches, e.g. this site https://medium.freecodecamp.org/why-arrow-functions-and-bind-in-reacts-render-are-problematic-f1c08b060e36 uses the map function within render and specifies an own function inside the class. – Zefau Mar 19 '19 at 18:43

React Native: map function in return

1 Answers1