React Responsive Carousel - Cannot read properties of null (reading 'type')-CodePudding

I try to implement react-responsive-carousel. It works with static links but when i try to get the data from my db im getting error. I tried to test if i get my link with console.log(imagemap) and it works fine. Im getting: ['https://www.top-magazin-frankfurt.de/wp-content/up…1/12/Das-„Franziska-im-Henninger-Turm.jpg', 'https://www.zeitlos-erding.de/wp-content/uploads/2…6/04/Zeitlos-Erding-Website-Restaurant-Bild-6.jpg']

But when i try to do it inside the carousel im getting this error: Cannot read properties of null (reading 'type')

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
import { Carousel } from 'react-responsive-carousel';

const Ambience = () => {
  const [images, setImages] = useState([]);
  useEffect(() => {
    const getImages = async () => {
      const res = await axios.get('/api/galery');
      setImages(res.data);
    };

    getImages();
  }, []);
  const imagemap = images.map((url) => {
    return url.name;
  });
  console.log(imagemap);
  return (
    <div className='min-h-screen'>
      <Carousel showArrows={true} showThumbs={true}>
        {images.map((url, index) => {
          <div key={index}>
            <img src={url.name} />
          </div>;
        })}
      </Carousel>
    </div>
  );
};

export default Ambience;

CodePudding user response：

You forgot to write return in the Carousel.

<Carousel showArrows={true} showThumbs={true}>
    {images.map((url, index) => {
      return (
         <div key={index}>
            <img src={url.name} />
         </div>);
     })}
</Carousel>

CodePudding user response：

  import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
  import { Carousel } from 'react-responsive-carousel';

  interface IMAGES {
   name: string;
  }

  const Ambience = () => {
  const [images, setImages] = useState<IMAGES[]>([]);
  useEffect(() => {
  const getImages = async () => {
  const res = await axios.get('/api/galery');
   setImages(res.data);
  };
   getImages();
 }, []);

  return (
  <div className='min-h-screen'>
  <Carousel showArrows={true} showThumbs={true}>
    {images.map((url, index) => (
      <div key={index}>
        <img src={url.name} />
      </div>;
    ))}
  </Carousel>
</div>
); 
};
export default Ambience;