Is there a way to combine JSX element and additional code?

The reason this doesn't work is because the map can only return one parent component. There is something called Fragment made specifically for this kind of scenario. The Fragment component doesn't render any HTML and it serves to work for this situation where you need a parent element for the sole purpose of pleasing React.

You can import the Fragment component from the react package.

import React, { Fragment } from 'react';

So now we simply add a Fragment as a parent component and add curly braces to your this.filterDishesOnCategory method.

{this.state.categories && this.state.dishes && this.state.categories.map((item) => (
    <Fragment>
        <Text style={{fontSize: 30, fontWeight: 'bold', padding: 5, backgroundColor: '#f0f0f0', borderWidth: 0.175}}>{item['dish_categories_name']}</Text>
        {this.filterDishesOnCategory(this.filterList(this.state.dishes), item['dish_categories_id']).map((listItem) => (
            <View key={listItem['dish_name']} >
                <Dish name={listItem['dish_name']} info={listItem['dish_description']} cost={listItem['dish_price']}/>
            </View>
        ))}
    </Fragment>
))}