Iteration

In a recent exercise, “Building a CRM”, we extracted a ContactCard component and used it for our 3 contacts:

<ul>
  <ContactCard
    name="Sunita Kumar"
    job="Electrical Engineer"
    email="sunita.kumar@acme.co"
  />
  <ContactCard
    name="Henderson G. Sterling II"
    job="Receptionist"
    email="henderson-the-second@acme.co"
  />
  <ContactCard
    name="Aoi Kobayashi"
    job="President"
    email="kobayashi.aoi@acme.co"
  />
</ul>

This solution works, but there's a potential issue with it: we won't always have the data when we write the code.

If we're building CRM software, this data will be dynamic. Every user will have a separate set of contacts, and those contacts will change all the time. We can't hardcode 3 random contacts like this!

In React, we typically solve this problem by using iteration. We dynamically create these React elements by using raw, unadulterated JavaScript.

Let's see how.