React spread operation of JSX elements inside map

Question

I am mapping over a array inside a array for a Picker and am struggeling to figure out how to return the JSX elements rather than the JSX element array.

code example:

{modelA.map((mA) => {
    const pickerItems = mA.modelB.map((mA) =>
        <Picker.Item value={mA} ... />,
    );
    return pickerItems;
})}

usually my aproach would be to make use of spread operators. but they do not do well in this syntax.

this:

{...modelA.map((mA) => {
    const pickerItems = mA.modelB.map((mA) =>
        <Picker.Item value={mA} ... />,
    );
    return pickerItems;
})}

is illegal: Spread children are not supported in React.

My dirty take on this would be to configure it pre render. but i'd rather not.

any suggestions?

Answer 1

You can just use reduce:

{modelA.reduce((arr,mA) => {
    mA.modelB.forEach((mA) => {
        arr.push(<Picker.Item value={mA} ... />)
    });
    return arr;
}), []}