0

Hi I'm a newb to reactjs and I wanted to try pulling some code from other libraries to see how it works. Unfortunately, I'm sort of stuck on trying to use the react-responsive-carousel. I realize this is a really simple question but I have been stuck on this for quite some time now and would appreciate any tips! Thank you so much!

Here is what I'm currently trying:

Index.jsx

import React from 'react';
import {render} from 'react-dom';
import AwesomeComponent from './AwesomeComponent.jsx';
import CarouselComponent from './Carousel.jsx'

class App extends React.Component {
    render() {
        return (
            <div>
                <p>Hello React!</p>
                <AwesomeComponent />
                <CarouselComponent />
            </div>
        );
    }
}

render(<App/>, document.getElementById('container'));

Carousel.jsx: 

import React from 'react';
import Carousel from 'react-responsive-carousel';

class CarouselComponent extends React.Component {
    render() {
        return (
            <div>
                <Carousel>
                    <div>
                        <img src="assets/1.jpeg" />
                        <p className="legend">Legend 1</p>
                    </div>
                    <div>
                        <img src="assets/2.jpg" />
                        <p className="legend">Legend 2</p>
                    </div>
                    <div>
                        <img src="assets/3.jpg" />
                        <p className="legend">Legend 3</p>
                    </div>
                </Carousel>
            </div>
        );
    }
}
export default CarouselComponent;

The error I'm seeing in the console right now is:

Warning: React.createElement: type is invalid -- expected a string (for 
built-in components) or a class/function (for composite components) but got: 
undefined. You likely forgot to export your component from the file it's 
defined in. Check the render method of `CarouselComponent`.
    in CarouselComponent (created by App)
    in div (created by App)
    in App
Tim
  • 2,221
  • 6
  • 22
  • 43

1 Answers1

2

Try importing react-responsive-carousel with braces. Like:

import { Carousel } from 'react-responsive-carousel';
Mustafa
  • 5,624
  • 3
  • 24
  • 40
  • Thank you that worked! Can I ask what the difference is when you add brackets? Does it make it referenceable? – Tim Jun 18 '17 at 09:42
  • 1
    I checked the `react-responsive-carousel` Carousel component [source code on github](https://github.com/leandrowd/react-responsive-carousel/blob/v3.1.19/src/components/Carousel.js) and it looks like it has a default export. This means that you don't need to use curly braces when importing it, so I don't really know why it doesn't work for you. You need braces when the component is not exported by default and you need to specify it's name when importing it. Here's a [detailed discussion](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import). – Mustafa Jun 18 '17 at 09:49