CODEWITHSUNDEEP
react-nativereact-reduxreact-native-flatlist
user9455682
user9455682

Reputation:

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

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,
    };


};

Upvotes: 1

Views: 1370

Answers (2)

Tharzeez
Tharzeez

Reputation: 1343

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} />

Upvotes: 1

Karan Jariwala
Karan Jariwala

Reputation: 727

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
}

Upvotes: 0

Related Questions