Question

Creating List in Onsen UI

Answer 1

Let us consider an example that renders a list with two random names chosen from the array 'names' For each item present in the datasource array, a random name will be chosen and rendered in <ListItem> component

//Some Code

  renderRow: function(row, index) {

    const names = ['Angular', 'ReactJS', 'Onsen'];

    const name = names[Math.floor(names.length * Math.random())];

    return (

      <Ons.ListItem key={index}>

        <div className='center'>

          {name}

        </div>

      </Ons.ListItem>

    );  },

  render: function() {

    return (

      <Ons.Page renderToolbar={this.renderToolbar}>

        <Ons.List

          dataSource={[ 1, 2]}

          renderRow={this.renderRow}

          renderHeader={() => <Ons.ListHeader>Welcome</Ons.ListHeader>}        />

      </Ons.Page>    );  }});

//Some code