How to map array in flatlist in React Native

Question

I have functionality which will return me days of the week. Then I am mapping that array into ScrollView. I am able to do this succesfully.

Below is my code:

<ScrollView
  horizontal={true}
  showsHorizontalScrollIndicator={false}>
  {weekArray.map((item, index) => (
    <TouchableOpacity
      index={index}
      onPress={() => setIndexSelect(index)}
      key={index}>
      <Text>
        {index === weekArray.length - 1 ? ` ${item.day} ` : ` ${item.day} | `}
      </Text>
    </TouchableOpacity>
  ))}
</ScrollView>;

This works, But I wanted to do this using FlatList, so tried below given code:

 <FlatList
  horizontal={true}
  contentContainerStyle={styles.horizontalView}
  data={weekArray}
  renderItem={_renderItem}
  keyExtractor={(item) => item.day}
/>;

const _renderItem = (item, index) => {
    <TouchableOpacity
      index={index}
      onPress={() => setIndexSelect(index)}
      key={index}
    >
      <Text>
        {index === weekArray.length - 1 ? ` ${item.day} ` : ` ${item.day} | `}
      </Text>
    </TouchableOpacity>
  }

I am getting just blank screen with this code. I am very new to using FlatList , so I am not able to figure out how to do this.

Answer 1

To use Flatlist, simply you have to pass data which you want to map, and there's a renderItem prop which is used for rendering the data, there's another prop called keyExtractor which is for giving every element a unique

<Flatlist 
   data={weekArray}
   renderItem={_renderItem}
   keyExtractor={(item) => item.day}
/>

const _renderItem = ({item, index}) => {
   return (
     //your jsx/code goes here
)}

for renderItem you have to add {}.