CODEWITHSUNDEEP
reactjsreact-bootstrap
Sherry Jain
Sherry Jain

Reputation: 71

React Carousel / Image Slider

I'm making a image slider in react JSX for profile section,bt it's not working.

import React from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';

const slider = (
  <AwesomeSlider>
    <div data-src={require('../assets/icons/s1.jpg')} />
    <div data-src={require('../assets/icons/s2.jpg')} />
    <div data-src={require('../assets/icons/s3.jpg')} />
  </AwesomeSlider>
);
export default slider;

Error:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of App.

Upvotes: 0

Views: 581

Answers (1)

MaartenDev
MaartenDev

Reputation: 5792

Because you are using slider as an component it has to return a function:

const Slider = ({props}) => (
    <AwesomeSlider>
        <div data-src={require('./assets/icons/s1.jpg')}/>
        <div data-src={require('./assets/icons/s2.jpg')}/>
        <div data-src={require('./assets/icons/s3.jpg')}/>
    </AwesomeSlider>
);
export default Slider;

Upvotes: 1

Related Questions