scopesample.js

class NamesList extends React.PureComponent {
  static getDerivedStateFromProps(nextProps, prevState) {
    const letters = extractLetters(nextProps.data);
    return {
      sections: letters.map(letter => {
        const data = nextProps.data.filter(item => item.startsWith(letter));
        return {
          letter,
          data,
          renderItem: ({ item }) => (
            <Item color={nextProps.color} name={item} />
          ),
        };
      }),
    };
  }

  render() {
    return (
      <SectionList
        sections={this.state.sections}
        renderSectionHeader={({ section }) => <Header section={section} />}
      />
    );
  }
}