Компоненту нечего возвращать ошибку в проекте Next.js / React

Question

У меня есть компонент слайдера изображений, который я создаю с помощью Nextjs / React и Emotion.

Мне кажется, я все сделал правильно! Однако я все еще получаю старую ошибку ...

Error: ImageSliderContainer(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Вот компонент ...

import ReactDOM from "react-dom";
import ImageSlider from "./ImageSlider";

const images = [
  "https://images.unsplash.com/photo-1449034446853-66c86144b0ad?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
  "https://images.unsplash.com/photo-1470341223622-1019832be824?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2288&q=80",
  "https://images.unsplash.com/photo-1448630360428-65456885c650?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2094&q=80",
  "https://images.unsplash.com/photo-1534161308652-fdfcf10f62c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2174&q=80",
];

const ImageSliderContainer = () => {
  <ImageSlider slides={images} />;
};

export default ImageSliderContainer;

Если вам нужно увидеть другие компоненты, дайте мне знать в комментариях. Я очень надеюсь, что мне не хватает чего-то дурацкого.

Спасибо!

Answer 1

Возникает ошибка, потому что вы ничего не вернули. Просто замените это на:

const ImageSliderContainer = () => {
  return <ImageSlider slides={images} />;
};

Answer 2

Вы ничего не возвращаете в компоненте ImageSliderContainer. Просто добавьте оператор return, и он должен работать!

const ImageSliderContainer = () => {
  return <ImageSlider slides={images} />;
};

Надеюсь, это поможет!