Lists rendering

---

Dynamic render with external component and props:

data = {
    list: [
      {
        name: 'Nick',
        age: 24,
      },
      {
        name: 'Rachel',
        age: 20,
      },
    ],
  }

childList = [
    () => this.data.list.map(el => {
      return {
        component: ThirdElement,
        props: {
          name: () => el.name,
          age: () => el.age,
        }
      }
    }),
  ]

---

Dynamic render with external component, props, emits and changing data:

data = {
    list: [
      {
        name: 'Nick',
        age: 24,
      },
      {
        name: 'Rachel',
        age: 20,
      },
    ],
  }

childList = [
    () => this.data.list.map((el, elIndex) => {
      return {
        component: ThirdElement,
        props: {
          name: () => el.name,
          age: () => el.age,
        },
        emitEvents: {
          newEmit: () => {
            // click-event-emit to change list item data (name + age)

            // get list
            const newList = this.data.list

            // we will get the index of the clicked item and change it
            newList[elIndex].name = 'Pavel'
            newList[elIndex].age = 55

            // update state
            this.changeData({
              list: newList,
            })
          },
        },
      }
    }),
  ]

---