---
title: "Dynamic Lists with LemonadeJS - Arrays and Loops Simplified | v4 docs"
description: "LemonadeJS v4 archive. Explore the LemonadeJS List component, a powerful library for creating dynamic elements with search and pagination from arrays of."
source: https://lemonadejs.com/docs/v4/examples/list/
---
List
====
It is possible bind a template multiple times using the directive `:loop`, creating lists.
Basic example
-------------
A basic example to render an array of objects.
### Source code
```html
```
```javascript
import lemonade from 'lemonadejs';
function List() {
// Create one self for each interaction in the array
const self = this;
// Template
return `
{{self.title}}
{{self.description}}
`;
}
function Component() {
const self = this;
self.data = [
{ title:'Google', description: 'The alpha search engine...' },
{ title:'Bing', description: 'The microsoft search engine...' },
{ title:'Yahoo', description: 'The old stuff...' },
];
// Custom components such as List should always be unique inside a real tag.
return ``;
}
// Register tag
lemonade.setComponents({ List });
// Render component
lemonade.render(Component, document.getElementById('root'));
```