How to fix (Uncaught Error: Cannot find module './undefined.jpg') in React.js

Question

I would appreciate to know why it gives this './undefined.jpg' before anything else and only AFTER that, renders all the actual paths.

import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import axios from 'axios';
import style from './CarsListPage.module.scss';
//import cars from './car-content';
import CarsList from '../components/CarsList';

const CarsListPage = () => {
  const [carsInfo, setCarsInfo] = useState([{}]);

  useEffect(() => {
    const loadCarsInfo = async () => {
      const response = await axios.get('/api/cars');
      const newCarsInfo = response.data;
      setCarsInfo(newCarsInfo);
    };
    loadCarsInfo();
  }, []);

  return (
    <div className={style.mainCotainer}>
      <main className={style.main}>
        <h1>Cars</h1>
        <div className={style.container}>
          {carsInfo.map((car) => (
            <Link to={`/cars/${car.name}`} key={car.id}>
              <div className={style.card} key={car.id}>
                <h3>{car.name}</h3>
                {/* {console.log(`../temp-img/${car.title}.jpg`)} */}
                <p>{car.body_type}</p>
                <p>{car.origin}</p>
                <p>{car.year}</p>
                <img
                  src={require(`../temp-img/${car.title}.jpg`)}
                  alt={car.name}
                  style={{ width: '200px' }}
                />
              </div>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
};

export default CarsListPage;

I've found couple solutions like wrapping everying into div and check whether value exists or not but i could not optimize it for my code.

Answer 1

Change the default state of carsInfo to [] otherwise you will map on an empty object until you get the data from the API:

const CarsListPage = () => {
  const [carsInfo, setCarsInfo] = useState([]);

  useEffect(() => {
    const loadCarsInfo = async () => {
      const response = await axios.get('/api/cars');
      const newCarsInfo = response.data;
      setCarsInfo(newCarsInfo);
    };
    loadCarsInfo();
  }, []);

  return (
    <div className={style.mainCotainer}>
      <main className={style.main}>
        <h1>Cars</h1>
        <div className={style.container}>
          {carsInfo.length && carsInfo.map((car) => (
            <Link to={`/cars/${car.name}`} key={car.id}>
              <div className={style.card} key={car.id}>
                <h3>{car.name}</h3>
                {/* {console.log(`../temp-img/${car.title}.jpg`)} */}
                <p>{car.body_type}</p>
                <p>{car.origin}</p>
                <p>{car.year}</p>
                <img
                  src={require(`../temp-img/${car.title}.jpg`)}
                  alt={car.name}
                  style={{ width: '200px' }}
                />
              </div>
            </Link>
          ))}
        </div>
      </main>
    </div>
  );
};