Рендеринг пар в React Native

Question

Я пытаюсь отобразить набор результатов из API в парах (если это нечетное число, я удаляю самый старый).

Я понятия не имею, как это сделать с помощью функции карты (во-первых, если общее возвращаемое значение - нечетное число, я его удаляю)

Этот код работает для меня (сортировка), но я нужно поместить тег "Block" внутрь, и тогда он тормозит для меня ...

это код, на который он должен быть похож ... но он не работает для меня (я получаю синтаксическую ошибку «Неопределенное регулярное выражение ...»):

var startingTag = true;
var renderedProducts = [];
for (let i = 0; i < newPairsSize; i++) {
    if (startingTag) {
        renderedProducts.push(
            <Block flex row><Product
                key={i}
                product={smallPosts[i]}
                style={{ marginRight: theme.SIZES.BASE }}
            />
        );
        startingTag = false;
    } else {
        renderedProducts.push(<Product key={i} product={smallPosts[i]} /></Block>);
        startingTag = true;
    }
}

Если я удалю тег «Блок», он не выдаст мне ошибок, но мне нужен этот тег:

var startingTag = true;
var renderedProducts = [];
for (let i = 0; i < newPairsSize; i++) {
    if (startingTag) {
        renderedProducts.push(
            <Product
                key={i}
                product={smallPosts[i]}
                style={{ marginRight: theme.SIZES.BASE }}
            />
        );
        startingTag = false;
    } else {
        renderedProducts.push(<Product key={i} product={smallPosts[i]} />);
        startingTag = true;
    }
}

И, наконец, я помещаю образец кода stati c ... вот как он должен выглядеть

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

У кого-нибудь есть какие-либо предложения (PS. Я пытался поместить его в переменную .. объединяя это ... ничего ..)

Answer 1

Если кому-то когда-нибудь понадобится что-то подобное ...

, это может сработать:

var renderedProducts = [];
            for (let i = 0; i < newPairsSize; i += 2) {
                renderedProducts.push(
                    <Block key={i} flex row>
                        <Product
                            product={smallPosts[i]}
                            style={{ marginRight: theme.SIZES.BASE }}
                        />
                        <Product product={smallPosts[i + 1]} />
                    </Block>
                );
            }