React Reference > List Component

<List />

Component for representing a list. It takes an array called datasource and calls renderRow(row, index) for every row. Furthermore, the header and the footer can be specified with renderRow and renderHeader respectively.

Usage 

<List
    dataSource={['Row 1', 'Row 2']}
    renderHeader={this.renderHeader}
    renderRow={(row, idx) => (
      <ListItem modifier={idx === this.state.data.length - 1 ? 'longdivider' : null}>
      {row}
  <Button modifier="quiet" onClick={this.remove.bind(this, idx)}>Remove</Button>
  </ListItem>
  )}
  renderFooter={this.renderFooter}
  />

Props

Name Type Description
modifier string Specify modifier name to specify custom styles. Optional.
dataSource array
[] 		Source of the list data. Should be an array. Optional.
renderRow func
() => null

Function to specify the rendering function for every element in in the dataSource.

Optional.
renderHeader func
() => null 		Function to specify the rendering function for the header Optional.
renderFooter func
() => null 		Function to specify the rendering function for the footer Optional.

Preset Modifiers

Name Description
inset Inset list that doesn’t cover the whole width of the parent.
noborder A list with no borders at the top and bottom.

Need Help?

If you have any questions, use our Community Forum or talk to us on Discord chat. The Onsen UI team and your peers in the community will work together to help solve your issues.

For bug reports and feature requests use our GitHub Issues page.