React native section list not re-rendering when item changes - reactjs

Question

I have a sectionList in my react native project. it does not re-render if item changes.
My code:
test.js
class Test extends React.Component {
started = false;
causeData=[];
showLess=false;
items = [];
_start = () => {
const { ws } = this.props;
this.showLess = false;
if (ws.causes.length) {
this.causeData = {
title: Language.causes,
key: "cause",
data: []
};
ws.causes.forEach(cause => {
let causeDetails = {
key: "cause_" + cause.id,
name: "",
value: cause.name,
sortIndex: cause.sortIndex,
progress: cause.progress
};
this.causeData.data.push(causeDetails);
if (this.causeData.data.length > 4) {
this.causeData.data = this.causeData.data.slice(0, 4);
}
});
this.items.push(this.causeData);
console.log("causeData", this.causeData);
}
}
}
_renderItem = ({ item }) => {
return (
<View>
<Text key={item.key} style={styles.text}>{`${item.name} ${
item.value
}`}</Text>
</View>
);
};
_renderSectionHeader = ({ section }) => {
const { ws } = this.props;
const showMore = ws.causes.length > 0 && !this.showLess;
return (
<View style={styles.sectionHeader}>
<Text key={section.key} style={styles.header}>
{section.title}
</Text>
{showMore && (
<Button
onPress={this._afterCauseAnswered}
title={Language.showMore}
data={this.items}
accessibilityLabel={Language.causeDoneAccessibility}
/>
)}
</View>
);
};
_keyExtractor = (item, index) => item.key;
_afterCauseAnswered = () => {
const { stepDone, ws } = this.props;
this.causeData.data = { ...ws.causes };
stepDone("showMoreAnswered");
this.showLess = true;
};
render = () => {
if (!this.started) {
this.started = true;
this._start();
}
return (
<View style={styles.container}>
<SectionList
sections={this.items}
extraData={this.items}
renderItem={this._renderItem}
renderSectionHeader={this._renderSectionHeader}
keyExtractor={this._keyExtractor}
/>
</View>
);
};
}
in my section list section header contain a button called showMore. At initial rendering it will only show 5 items, while clicking showMore it should display all List. This is my functionality. but while clicking showMore button it will not show entire list only shows 5 items that means the sectionList does not getting re-render. How to resolve this? i am new to react native. Any idea what am I missing ? Any help would be greatly appreciated!

Answer 1

Keep items and showLess in a state and after pressing Button call setState with the new values. It will rerender the SectionList. Also, if you want to display multiple items with a displayed list, you need to move showLess to the item element so each item knows how to display it.

Answer 2

You just need to rerender your screen using state and it's done
this.setState({})

Answer 3

Your SectionList should always read from state ... as it should be your single source of truth
and here's how:
class YourComponent extends React.Component {
state = {
items: [],
};
// This will be called after your action is executed,
// and your component is about to receive a new set of causes...
componentWillReceiveProps(nextProps) {
const {
ws: { causes: nextCauses },
} = nextProps;
if (newCauses) {
// let items = ...
// update yout items here
this.setState({ items });
}
}
}