Реагировать на результаты API собственного форматирования

Question

Извините, ребята, я совершенно новичок в React. У меня есть результаты API, которые возвращают некоторые результаты, и я отображаю их на экране:

<Block flex center style={styles.deals}>
    <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.products}
    >
        <Product product={products[0]} full />
            <Block flex row>
                <Product
                    product={products[1]}
                    style={{ marginRight: theme.SIZES.BASE }}
                />
                <Product product={products[2]} />
            </Block>
        <Product product={products[3]} horizontal />
    </ScrollView>
</Block>

Что я делаю, я создаю массив продуктов, которые должны отображаться полностью (ie. <Product product={products[0]} full />)

, чем другой массив продуктов, выполняемых в парах: ie:

 <Block flex row>
        <Product
            product={products[1]}
            style={{ marginRight: theme.SIZES.BASE }}
        />
        <Product product={products[2]} />
   </Block>

И, наконец, ... если число пар не четное, то последнее, которое я представляю как: <Product product={products[3]} horizontal />

полностью сложный кусок ... с большим количеством if's else ... и так далее ... просто проверка, сталкивался ли кто-нибудь с чем-то подобным раньше ... это может быть более простой способ сделать это.

спасибо !!