CODEWITHSUNDEEP
reactjsreact-nativereact-native-flatlist
ojandali
ojandali

Reputation: 193

React Native Flatlist is not rendering any item in the list on screen with renderItem

I have a react component that is supposed to render a list of values based on an array of objects that I have stored.

It is not rendering any of the items on the screen and I am not sure why. I looked at the docs and other references and it is not giving me a solution. I have a feeling it is simple but I have coders block.

Here is my code:

this is the object I am trying to render:

const bedCount = [{
    value: null,
    label: 'Any',
    key: 7
  },
  {
    value: 0,
    label: 'Studio',
    key: 0
  },
  {
    value: 1,
    label: '1',
    key: 1
  },
  {
    value: 2,
    label: '2',
    key: 2
  },
  {
    value: 3,
    label: '3',
    key: 3
  },
  {
    value: 4,
    label: '4',
    key: 4
  },
  {
    value: 5,
    label: '5',
    key: 5
  },
  {
    value: 6,
    label: '6',
    key: 6
  }]

Here is the flat list

      <View>
        <Text>
          Min. Beds:
        </Text>
        <FlatList 
          data={bedCount}
          horizontal={true}
          keyExtractor={item => item.key}
          renderItem={(item) => {
            <TouchableOpacity onPress={setMinBeds(item.value)}>
              <Text>{item.label}</Text>
            </TouchableOpacity>
          }}
        />
      </View>

This is what is rendering on screen: this is the screen render

Upvotes: 0

Views: 1462

Answers (1)

Alexander Obidiegwu
Alexander Obidiegwu

Reputation: 644

<View>
        <Text>
          Min. Beds:
        </Text>
        <FlatList 
          data={bedCount}
          horizontal={true}
          keyExtractor={item => item.key}
          renderItem={(item) => (
            <TouchableOpacity onPress={setMinBeds(item.value)}>
              <Text>{item.label}</Text>
            </TouchableOpacity>
          )}
        />
      </View>

You need to return an element using bracket () instead of {}

Upvotes: 1

Related Questions