Component nothing to return error on a Next.js/React project

Question

I have an image slider component I'm building with Nextjs/React and Emotion.

I feel like I've done everything properly! However I'm still get the age old error...

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

Here is the component...

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;

If you need to see the other components, let me know in the comments. I really hope it's just something daft I'm missing.

Thanks!

Answer 1

You're not returning anything in the ImageSliderContainer component. Just add the return statement and it should work !

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

Hope this helps !