How to use if statement in map function (React Native)?

Question

I want to use if statement in map function. Here is the code which I am using:

_collapsible() {
    return (
        <View style={styles.section}>
            <View style={CssHelper['flexRowCentered']}>
                { data['items'].map((item, index) =>
                    <FilterButton key={index} status={STATUS_DEFAULT_FILTER_BUTTON} style={styles.brandContainer}>
                        <ImageBackground style={styles.brand} source={item.source} resizeMode="contain"/>
                    </FilterButton>

                    //((index + 1) % 3 === 0) && <View style={CssHelper['verticalDivider']}></View>
                )}
            </View>
        </View>
    );
}

I think this is more to do with returning multiple child components instead of a single component from your .map call - try wrapping the return value of the map function in a <React.Fragment>. — azundo
– azundo, Commented Nov 21, 2019 at 6:22
Ok, thanks. Can you show me a little code snippet how to do it? — Umid Boltabaev
– Umid Boltabaev, Commented Nov 21, 2019 at 6:27

Ajith · Accepted Answer · 2019-11-21 06:54:14Z

3

Your code is almost correct, The only thing is you miss a double bracket before the condition checking, Also please try to add a wrapper inside the map function to hold all the content, I have added a sample code for the same case with wrapper content inside map with flex:1

{ this.state.items.map((item, index) =>
    <View  style={{flex:1}} key={index}>
        <Text>{item.title}</Text>
        {  
        ((index + 1) % 3 === 0) && 
        <View style={{}}><Text>Third Row</Text></View> 
        } 
    </View>
)}

answered Nov 21, 2019 at 6:54

Ajith

2,6784 gold badges21 silver badges43 bronze badges

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

Comments

user12379691 · Accepted Answer · 2019-11-21 06:35:03Z

1

use ternary condition

{statment ? : null}

answered Nov 21, 2019 at 6:35

user12379691

Collectives™ on Stack Overflow

How to use if statement in map function (React Native)?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related