React Native: Conditional props for List - react-native

Question

I was wondering if there is a way to set a group of properties for a list component based on a condition.
render() {
return (
<SectionList
ref={(ref) => {this.listRef = ref}}
style={styles.listContainer}
sections={this.props.listData}
fetchData={this.props.fetchData}
keyExtractor={this.keyExtractor}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderItem}
ItemSeparatorComponent={this.separator}
keyboardDismissMode='on-drag'
initialNumToRender={6}
stickySectionHeadersEnabled={false}
// ListFooterComponent={this.renderFooter}
// onEndReachedThreshold={0.5}
// onEndReached={() => {
// this.props.fetchMoreData()}}
/>
)
}
I would like ListFooterComponent, onEndReachedThreshold and onEndReached only to be set if this.props.fetchMoreData is set. Do I need to put an if-statement at the top of the render function or is it possible to create a separate prop to group those 3 and use the spread operator to put this back into the SectionList based on the condition. I am not quite sure how to do this.

Answer 1

I ended up with the following
render() {
optional = {}
if (this.props.fetchMoreData) {
optional.onEndReachedThreshold = 0.5
optional.onEndReached = () => {
this.props.fetchMoreData()}
optional.ListFooterComponent = this.renderFooter
}
return (
<SectionList
ref={(ref) => {this.listRef = ref}}
style={styles.listContainer}
sections={this.props.listData}
fetchData={this.props.fetchData}
keyExtractor={this.keyExtractor}
renderSectionHeader={this.renderSectionHeader}
renderItem={this.renderItem}
ItemSeparatorComponent={this.separator}
keyboardDismissMode='on-drag'
initialNumToRender={6}
stickySectionHeadersEnabled={false}
{...optional}
/>
)
I think I initially tripped over optional.ListFooterComponent. It just looked strange to me so I assumed it must be wrong ;)