How can I render 2 items in a FlatList in React-native and Redux - react-native

Question

I need to render two items "clientcalendarscreenred" and "nutritiondata" in a FlatList
PS: I am getting the two data "clientcalendarscreenred" and "nutritiondata" from a reducer through mapStateToProps
<FlatList
data={this.props.clientcalendarscreenred }
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
ItemSeparatorComponent={this._renderSeparator}
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
===========
GETTING The DATA
===============
const mapStateToProps = ({clientcalendarscreenred, maincalendarreducer}) => {
const { client_id, workout_date, display_date } = maincalendarreducer;
return {
clientcalendarscreenred: clientcalendarscreenred.data,
nutritiondata: clientcalendarscreenred.nutrition,
};
};

Answer 1

You can use section list for this scenario.
You can also render the list heterogeneous or homogeneous i.e if you wish to render your sections differently
<SectionList renderSectionHeader={({section}) => this._renderHeader(section.data)}
sections={[
{
key: 'RedData',
data: clientcalendarscreenred.data,
renderItem: ({item}) => this.renderRedData(item)
},
{
key: 'NutritionData',
data: clientcalendarscreenred.nutrition,
renderItem: ({item}) => this.renderNutrition(item, index, section)
},
]}
keyExtractor={(item, index) => index}
/>

Answer 2

Something like below should work for you to print items from data prop in FlatList.Similarly you can pass nutritiondata to FlatList and use it to display.
const FlatList=(props)=>{
const {data, ...rest}=props;
const toRender= data&&data.length>0?data.map(item=><div>{item.something}</div>:<div/>
return toRender
}