CODEWITHSUNDEEP
react-native
Michiel
Michiel

Reputation: 1006

Render 'no content' component when section in SectionList component is empty

See https://facebook.github.io/react-native/docs/sectionlist.html

When one of the Section's is empty (e.a. the data prop is an empty array), I would still like to render the SectionHeader, but also render a component that indicates that the section contains no data.

I know for the FlatList component this is possible using the ListEmptyComponent prop, but how does this work for the SectionList component?

I was hoping for something like this (but it doesn't work): 

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => <SectionHeader title={section.title} />}
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ]}
  />

Upvotes: 24

Views: 15884

Answers (6)

JTtime
JTtime

Reputation: 81

As per documentation of React Native, ListEmptyComponent is the props provided for SectionList, but it will work only if we pass an empty array to section.data

    <SectionList
    sections={ filteredData ?? []}>

This should render Empty component written under ListEmptyComponent Props in case of no response or blank data

SectionList_React_Native_Documentation

Upvotes: 0

never_give_up2
never_give_up2

Reputation: 21

Easy way. And you will get all the Components except the Component that renders the data.

const myData = items?.length ? DATA : [] 

<SectionList
        sections={myData}
        keyExtractor={getKeyExtractor}
        renderItem={renderItem}
        renderSectionHeader={renderSectionHeader}
        ListHeaderComponent={renderHeader}
        ListFooterComponent={renderFooterComponent}
      />

Upvotes: 0

Daniel Dimitrov
Daniel Dimitrov

Reputation: 2018

I'm little late for the party, but since I just had to do this and I wasted a little more time on it than I'm comfortable admitting, I'll try to wrap everything up.

You can't use SectionList's ListEmptyComponent to achieve this as you do with the FlatList component. ListEmptyComponentis only triggered when the data prop is empty. If however you have any section in the data prop, then ListEmptyComponent won't be triggered.

One of the replies suggests using renderItem and checking inside of it whether section.data.length equals 0. That's nice idea, except that renderItem won't be called for sections that have data.length === 0. So this approach won't work.

What you are left with is either using renderSectionHeaderor renderSectionFooter - which one you decide to use is up to you and your specific use case.

The renderSection*function receives the section and there you are able to check whether the section has a data prop with length > 0. If it doesn't this would be your chance to output an EmptyComponent.

With the specific example in the question it would look something like this:

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => {
      if (section.data.length === 0) {
        return section.ListEmptyComponent     
      }
      return <SectionHeader title={section.title} />

    }
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ]}
  />

Upvotes: 13

aesde
aesde

Reputation: 11

<SectionList
    style={styles.container}
    renderSectionHeader={({section}) => <SectionHeader title={section.title} />}
    sections={[
      {
        data: Object.values(this.props.teams),
        title: 'Teams',
        renderItem: this._renderTeamItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      },
      {
        data: Object.values(this.props.invites),
        title: 'Invites',
        renderItem: this._renderInviteItem,
        keyExtractor: item => item.id,
        ListEmptyComponent: this._renderEmpty
      }
    ].filter(s => s.data.length > 0)}
  />

try to filter out empty sections :)

Upvotes: 1

Arbnor
Arbnor

Reputation: 2362

You could use the renderSectionFooter to display any 'no content' component. Check out the following little example:

<SectionList
   renderSectionFooter={this.renderNoContent}
   section={[
      {data: ['1', '2']},
      {data: []}
   ]}
/>

renderNoContent = ({section}) => {
   if(section.data.length == 0){
      return NO_CONTENT_COMPONENT
   }
   return null
}

Upvotes: 59

Shayan Javadi
Shayan Javadi

Reputation: 380

Should work in the exact same way I believe: listEmptyComponent

Alternatively you could also do a conditional in your JSX to render the message for there being no data

Upvotes: -2

Related Questions