React-native-collapsible: renderContent does not rerender on Props/State change.

[ProfessionalAmateur]

I have a fairly simple Accordion, where the renderHeader & renderContent is filled with data coming from Props. When the props change the rendeerHeader correctly shows the new data, but the renderContent has not rerendered and shows the old data.

Do I need to perform a task to rerender the renderContent section?

Here is a overview of my code:

_renderHeader = (section: any) => {
    return (
      <View>
        <View>          
          <Text>{section.ExternalId} - {section.Data}</Text>
        </View>        
      </View>      
    );
  };

renderItem = (obj: any) => <TxRowDetail {...obj} onSelectApp={this.handleAppSelect} onLongPress={this.handleLongPress} />

render() {
return (
  <ScrollView style={styles.container}>
    <StatusBar />
    <Accordion
        sections={this.props.txData}
        activeSections={this.state.activeSections}
        renderHeader={this._renderHeader}
        renderContent={this.renderItem}
        onChange={this._updateSections}

    />
  </ScrollView>
)}

[iRoachie]

Can you create an example on https://snack.expo.io that reproduces this?

[ProfessionalAmateur]

@iRoachie -

Here is the snack. If you click on the second row and then press the button you will see the issue. The header is updated but the renderContent is not rerendered.

Note this only occurs if my renderContent is an import from another file. If I the renderContent verbosely in the App.js it does render with the state change.

https://snack.expo.io/ByexYVGFH

[iRoachie]

It's the way you're defining the TxtRow component. Returning an object with a render key is now deprecated in react. https://reactjs.org/blog/2019/08/08/react-v16.9.0.html#deprecating-factory-components

Before

const TxRow = (props: Props) => ({
  render() {
    return (
      <View>
        <Text>{props.content}</Text>
      </View>
    );
  },
});

After

const TxRow = (props: Props) => {
  return (
    <View>
      <Text>{props.content}</Text>
    </View>
  );
};

[ProfessionalAmateur]

That is interesting. My RN app is using react 16.5.0 and RN 0.57.1 so I assumed it would still work. (I know we should upgrade but maintaining upgrades doesnt provide us with any ROI and a lot of headache.

I am fairly new to RN, if I change my code to your after where do I place my variable declaration and whatnot (I apologize for the newbie question). For instance:

const TxRow = (props: Props) => {
  console.log("PROPS: " + JSON.stringify(props))
  let data = JSON.parse(props.Data)
  return (
        <View>          
         <Text>{props.content}</Text>         
        </View>      
      )
};

[iRoachie]

Yes the example you have there should work

[ProfessionalAmateur]

It gives me an error. Let me play around and see if I can fix it. Good learning opportunity for me. I appreciate the help, if I am still stuck I will post another reply. Have a nice day!

[ProfessionalAmateur]

That did the trick. Thank you again for the assistance.