Section List in React Native-CodePudding

I'm trying to convert a set of data into a SectionList, but nothing (except for "Test Title") is appearing. What am I doing wrong?

I've seen online that most section lists are made via a "single key and single value" type setup, but my needs require a key to a set of values.

const DATA = [
  {
    section1: 'Application1',
    data: {
      title: 'title',
      content: 'content',
      time: '30 min'
    }
  },
  {
    section1: 'Application2',
    data: {
      title: 'title',
      content: 'content',
      time: '30 min'
    }
  },
  {
    section1: 'Application3',
    data: {
      title: 'title',
      content: 'content',
      time: '30 min'
    }
  }
]

export default function App() {
  return (
    <SafeAreaView style={styles.appContainer}>
      <View style={styles.titleContainer}>
        <Text style={styles.titleText}>
          Test Title 
        </Text>
      </View>

      <SectionList
        sections={DATA}
        renderItem={({ section1 }) => (
          <View style={styles.item}>
            <View>
              <Text style={styles.title}>{section1.data.title}</Text>
              <Text style={styles.title}>{section1.data.content}</Text>
              <Text style={styles.title}>{section1.data.time}</Text>
            </View>
          </View>
        )}
        renderSectionHeader={({section }) => (
          <View style={styles.header}>
            <Text>{section.section1}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

CodePudding user response：

sections must be an array of Sections and Section must have data prop which is an array of objects. See sections for details.

Something like this:

const DATA = [
  {
    section1: 'Application1',
    data: [{
      title: 'title',
      content: 'content',
      time: '30 min'
    }]
  },
  {
    section1: 'Application2',
    data: [{
      title: 'title',
      content: 'content',
      time: '30 min'
    }]
  },
  {
    section1: 'Application3',
    data: [{
      title: 'title',
      content: 'content',
      time: '30 min'
    }]
  }
]

and then render item and header like this

renderItem={({item}) => (
  <View style={styles.item}>
    <Text style={styles.title}>{item.title}</Text>
  </View>
)}
renderSectionHeader={({section: {section1}}) => (
  <Text style={styles.header}>{section1}</Text>
)}