Ytukyg

I'm trying to implement the following view where each column is limited to 4 rows of song details in a horizontal FlatList. I have managed to create each row with song details + purchase button in a single component.

However, I'm struggling to limit each column to just 4 row of results. I'm currently rendering each component with a map function:

renderBestOfTheWeek = (items) => {

  return (

    <View>

      {items.map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}

    </View>

  )

}



render() {

  return (

    <FlatList

      data={this.state.bestOfTheWeek}

      horizontal={true}

      renderItem={this.renderBestOfTheWeek}

    />

  )

}

SongItemHorizontalScroll component:

   <View style={containerStyle}>

      <Image

        source={{ uri: thumbnail_image }}

        style={albumImageStyle}

      />

      <View style={songDetailButtonContainer}>

        <View style={songInfoStyle}>

          <Text

            style={{ fontSize: 12, lineHeight: 14, width: 160 }}

            numberOfLines={1}>

            {title}

          </Text>

          <Text

            style={{ color: '#666', fontSize: 12, lineHeight: 14, width: 160 }} numberOfLines={1}

          >{artist} - {album}</Text>

        </View>

        <Button onPress={() => Linking.openURL(url)} price={price} />

      </View>

    </View>

My data have been structured as such and is currently stored in state.

0: (4) [{…}, {…}, {…}, {…}]

1: (4) [{…}, {…}, {…}, {…}]

2: (4) [{…}, {…}, {…}, {…}]

3: (4) [{…}, {…}, {…}, {…}]

However I'm receiving the following error message (TypeError: items.map is not a function).

Where did I go wrong and what would be the proper method of achieving this?

It looks like somewhere items became an Object instead of an Array like it was meant to be. Try making it an Array again.

renderBestOfTheWeek = (items) => {

  return (

    <View>

      {Array.from(items).map((item, index) => <SongItemHorizontalScroll item={item} key={index} />)}

    </View>

  )

}

The renderItem function receives an object containing the keys item and index.

Thus, you should have

renderBestOfTheWeek = ({ item }) => {

Based on @Foyarash suggestion and help, here's the solution:

renderBestOfTheWeek = ({ item }) => {

    return (

        <View>

            {item.map((songs, index) => <SongItemHorizontalScroll item={songs} key={index} />)}

        </View>

    )

}