Carousel in React.js

Question

I am trying to implement this tutorial. My code is like below

import makeCarousel from 'react-reveal/makeCarousel';
import Slide from 'react-reveal/Slide';
import styled, { css } from 'styled-components';


export default class Slider extends Component {
  Container = styled.div`
    border: 1px solid red;
    position: relative;
    overflow: hidden;
    width: 300px;
    height: 150px;
  `;
 CarouselUI = ({ children }) => <Container>{children}</Container>;
 Carousel = makeCarousel(CarouselUI);

render (
    <Carousel defaultWait={1000} /*wait for 1000 milliseconds*/ >
      <Slide right>
        <div>
          <h1>Slide 1</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
      <Slide right>
        <div>
          <h1>Slide 2</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
    </Carousel>
  );
}

I am getting error like below

Answer 1

you forgot to write return. Also the render function needs () after it.

render() {
return (
    <Carousel defaultWait={1000} /*wait for 1000 milliseconds*/ >
      <Slide right>
        <div>
          <h1>Slide 1</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
      <Slide right>
        <div>
          <h1>Slide 2</h1>
          <p>Slide Description</p>
        </div>
      </Slide>
    </Carousel>
  );
}

Answer 2

You seem to be missing some code, also need to move some lines around. It is unfortunate the tutorial misses some code and makes it seem like everything is inside your default exported class.

you need the line import React from 'react' at the top of your file, it needs to be in every React component.

Also The Component composition lines, which inject your styles etc, need to be moved outside of your exported class. Also they need to be defined, i.e. use const.

 const Container = styled.div`...`
 const CarouselUI = ({ children }) => <Container>{children}</Container>;
 const Carousel = makeCarousel(CarouselUI);

and then also missing a return statement in render function. Remember its a function of the class Slider, so you also need the () after.

See a codesandbox which works - https://codesandbox.io/s/agitated-browser-foxsb?fontsize=14&hidenavigation=1&theme=dark

Answer 3

you have to install: npm install react-responsive-carousel

for more information about Carousel follow the below link: Link:https://www.npmjs.com/package/react-responsive-carousel

and more over you forget to write render{ return(...... ) }