How to pass an additional parameter with a defined prop function?

Question

I need to declare a function for a prop which has defined parameter. The Component is Accordion from react-native-collapsible. The prop for the component that I want to implement a function is onChange(indexes), and I want to pass an additional parameter 'title' for it.

I've tried passing a parameter with the same name 'indexes', but the variable 'indexes' hasn't been declared thus returning an error when executing. I don't know which syntax to pass the new parameter.

Passing the function to the prop without any parameter works just fine, but I need to pass the title as a parameter to the function.

The component itself (I expected the onChange props to call the updateSections with indexes of the active accordion and a title):

<Accordion
  sections={data}
  activeSections={activeSections}
  renderHeader={this.renderHeader}
  renderContent={this.renderList}
  onChange={this.updateSections(indexes, title)}
  touchableComponent={TouchableOpacity}
/>

This works just fine:

<Accordion
  sections={data}
  activeSections={activeSections}
  renderHeader={this.renderHeader}
  renderContent={this.renderList}
  onChange={this.updateSections}
  touchableComponent={TouchableOpacity}
/>

The function to be implemented:

updateSections = (activeSections, title) => {
  switch (title) {
   case 'PA':
     this.setState({ activeSectionsPA: activeSections });
     break;
   case 'CA':
     this.setState({ activeSectionsCA: activeSections });
     break;
   default:
     break;
  }
}

Any help would be appreciated! Thanks!

Answer 1

Use arrow function there

<Accordion
  sections={data}
  activeSections={activeSections}
  renderHeader={this.renderHeader}
  renderContent={this.renderList}
  onChange={(indexes) => this.updateSections(indexes, title)} // change this
  touchableComponent={TouchableOpacity}
/>