How to write a render loop in React?

Question

React

I have an array with machine data:

export const carData: Icar[] = [
  {
    name: 'Audi A5',
    year: 2007,
    src: '../../images/cars/audi.png'
  },
  {
    name: 'BMW 8',
    year: 2017,
    src: '../../images/cars/bmw.png'
  },
  {
    name: 'Mercedes-Benz C',
    year: 2013,
    src: '../../images/cars/mers.png'
  },
  {
    name: 'Honda Accord',
    year: 2012,
    src: '../../images/cars/honda.png'
  },
  {
    name: 'Hyundai Sonata',
    year: 2019,
    src: '../../images/cars/hyundai.png'
  },
  {
    name: 'Toyota Supra A90',
    year: 2019,
    src: '../../images/cars/tayota.png'
  }
];

And here's the component:

import React from 'react';
import { carData } from './carData';

export default function CreateCar() {
  for(let i = 0; i < carData.length; i+= 1) {
    let name = carData[i].name;
    let year = carData[i].year;
    let src = carData[i].src;
  }
  return (
  );
}

I need to create a card for each car, how can I return a div with all the cards using a cycle so that I don’t write each one manually. I tried to do += in the variable, but it throws an error that you cannot add div. I need to return the div in which all the car cards will be.

Answer 1

documentation