CODEWITHSUNDEEP
react-native
FabricioG
FabricioG

Reputation: 3310

Section List not displaying

Following the React-Native tutorial and I'm unable to get the data to show.

When I do a console.log my data appears like so:

Array [
  Object {
    "data": Object {
      "address": "8753 2nd Street",
      "id": "5507",
      "inspection_date": "2019-03-27",
      "inspection_time": "07:00:00",
      "inspection_time_display": "07.00 AM",
      "inspector": "Frank",
    },
    "key": "5507",
    "title": "8753 2nd Street",
  },
  Object {
    "data": Object {
      "address": "11445 Paramount ave ",
      "id": "5505",
      "inspection_date": "2019-03-23",
      "inspection_time": "10:30:00",
      "inspection_time_display": "10.30 AM",
      "inspector": "Fabian Hernandez",
    },
    "key": "5505",
    "title": "11445 Paramount ave ",
  },
]

I have the "data" and "title" sections as indicated in most tutorials.

My component is like this:

 <Container>
    <Header />
    <Content>
    <SectionList
      renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontWeight: 'bold'}}>{title}</Text>
      )}
      sections={this.state.dataSource}
      keyExtractor={(item, index) => item + index}
    />
    </Content>
  </Container>

This is what I think is happening but I'm obviously wrong since something isn't adding up. Looping through "sections" 

renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}

I'm expecting this above to get the "data".

Getting title:

renderSectionHeader={({section: {title}}) => (
            <Text style={{fontWeight: 'bold'}}>{title}</Text>
          )}

I'm expecting this above to get the "title". What am I missing or doing wrong?

Upvotes: 2

Views: 2789

Answers (1)

krewllobster
krewllobster

Reputation: 435

I believe the data key in each of your section objects need to be an array unto itself. Example: 

const mySectionedData = [
  {
    title: 'section 1',
    data: [ 
      {address: '123 street', name: 'me'}, 
      {address: '456 street', name: 'you}
    ]
  },
  {
    title: 'section 2',
    data: [ 
      {address: '789 street', name: 'us'} 
    ]
  }
]

This then lets you access {title, data} from each of your sections which allows the section list to then render your section header from title, and a list of items from the data array.

Hope that helps!

Upvotes: 4

Related Questions