I am trying to render empty ponent when my sections are empty. This is the sample code of mine

<SectionList
    sections={[
        {title: 'sectionOne', data: this.props.Activities.ActivityTypeOne},
        {title: 'sectionTwo', data: this.props.Activities.ActivityTypeTwo},
        {title: 'sectionThree', data: this.props.Activities.ActivityTypeThree}
    ]}
    keyExtractor={ (item, index) => index }
    stickySectionHeadersEnabled={true}
    extraData={this.state}
    ListEmptyComponent={this.renderEmptyScreens}
    />

But when this 3 all arrays are empty, it does not trigger the ListEmptyComponent Can anyone tell me what is wrong with this code, or if my logic is incorrect can anyone please explain me. Bacically I need to render some view when all 3 arrays are empty.

I am trying to render empty ponent when my sections are empty. This is the sample code of mine

<SectionList
    sections={[
        {title: 'sectionOne', data: this.props.Activities.ActivityTypeOne},
        {title: 'sectionTwo', data: this.props.Activities.ActivityTypeTwo},
        {title: 'sectionThree', data: this.props.Activities.ActivityTypeThree}
    ]}
    keyExtractor={ (item, index) => index }
    stickySectionHeadersEnabled={true}
    extraData={this.state}
    ListEmptyComponent={this.renderEmptyScreens}
    />

But when this 3 all arrays are empty, it does not trigger the ListEmptyComponent Can anyone tell me what is wrong with this code, or if my logic is incorrect can anyone please explain me. Bacically I need to render some view when all 3 arrays are empty.

• javascript
• list
• react-native

Share Improve this question Follow edited Jul 26, 2019 at 13:09 sd_dewasurendra asked Jul 26, 2019 at 12:40 sd_dewasurendrasd_dewasurendra 39366 silver badges2323 bronze badges 6

• Where do you get sectionList from? – Vencovsky Commented Jul 26, 2019 at 13:04
• I did not get it @vencovsky – sd_dewasurendra Commented Jul 26, 2019 at 13:09
• Now with your edit, I see where you get it from. Please show the case where it's nothing working. Please show how is But when this 3 all arrays are empty – Vencovsky Commented Jul 26, 2019 at 13:12
• Your list isn't empty, it contains three sections. The fact that these sections are empty isn't relevant. – Etheryte Commented Jul 26, 2019 at 13:19
• this.props.Activities.ActivityTypeOne, this.props.Activities.ActivityTypeTwo, this.props.Activities.ActivityTypeThree when this lists are empty I need to display another view – sd_dewasurendra Commented Jul 26, 2019 at 13:20

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

After running into this problem myself, I discovered that the sections property has to be pletely empty for the list to be considered empty (aka, sections itself should equal to []).

Solution:

Use a ternary operator to choose what to pass into sections based on your own criteria. If it's decided to be empty, pass in [], else pass in your sections object. As an example, your code would look something like this:

isSectionsEmpty(sectionsObject){
    //logic for deciding if sections object is empty goes here
}

render(){
    /* ...
       Other render code
       ...
    */
    const sections = [
        {title: 'sectionOne', data: this.props.Activities.ActivityTypeOne},
        {title: 'sectionTwo', data: this.props.Activities.ActivityTypeTwo},
        {title: 'sectionThree', data: this.props.Activities.ActivityTypeThree}
    ]
    return(
        ...
        <SectionList
            sections={this.isSectionsEmpty(sections) ? [] : sections}
            keyExtractor={ (item, index) => index }
            stickySectionHeadersEnabled={true}
            extraData={this.state}
            ListEmptyComponent={this.renderEmptyScreens}
            />
        ...
    )
}

Note: You could also forego the ternary operator and directly return either your sections object or [] from isSectionsEmpty, but this method allows for you to check if sections is "empty" elsewhere in your code, if needed.

You could add a section footer ponent in which you will render your empty screen based on section.data.length

For a little example see this