CODEWITHSUNDEEP
reactjsreact-native
kilinkis
kilinkis

Reputation: 602

React - Flatlist doesn't render anything

I have a React-Native project that renders a list of items.

I was using .map function to do it but since I'll have several items in the future, I'm trying to migrate the function to flatlist.

The documentation provided by React is quite simple, yet I can't get it to work. Any ideas why?

here's my code:

renderEtiquetas() {

        // this commented code works just fine
        // return this.props.etiquetas.map(etiqueta =>
        //   <EtiquetaDetail key={etiqueta.id} etiqueta={etiqueta} galleries={ this.props.galleries } />
        // );

        <FlatList
          data={ this.props.etiquetas }
          keyExtractor={etiqueta => etiqueta.id}
          renderItem={({ etiqueta }) => (
            <EtiquetaDetail key={etiqueta.id} etiqueta={etiqueta} galleries={ this.props.galleries } />
          )}
        />

  }

here is the content for this.props.etiquetas has this format: [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] and here is one of the objects in it: {id: 523, date: "2014-04-16T16:30:03", date_gmt: "2014-04-16T16:30:03", modified: "2018-01-13T00:00:43"}

Thanks for your time!

Upvotes: 2

Views: 1960

Answers (3)

Louay Al-osh
Louay Al-osh

Reputation: 3405

Using FlatList is a wise move because it has better performance gains

I faced the same problem and I solved it by using return (<MyComponent />)

in the renderItem function

because writing your component without return won't work, here is a little example

            <FlatList 
            data={citiesLabelsAndNumbers.map(x=>x.city)}
            renderItem={({item}) => {
                return (<HorizontalCard text={item} onPress={()=>{}} />)
            }}
            keyExtractor={(item,index) => String(index)}
            />

Upvotes: 1

kilinkis
kilinkis

Reputation: 602

The problem was that I was missing the return word before https://facebook.github.io/react-native/docs/flatlist.html Also, I tried extraData={this.state} but didn't do anything.

Thanks @Chao Chen for answering!

Upvotes: 0

Chao Chen
Chao Chen

Reputation: 41

According to my experience. Flatlist will consume your data to renderItem.

change your flatlist tag to 

    <FlatList
      data={ this.props.etiquetas }
      keyExtractor={etiqueta => etiqueta.id}
      renderItem={({ item }) => (
        <EtiquetaDetail key={item.id} etiqueta={item} galleries={ this.props.galleries } />
      )}
    />

If you want Flatlist re-render properly. Add extraData={this.state} to it.

Upvotes: 1

Related Questions