React - Element type is invalid: expected a string or a class/function but got: object

Question

I am implementing react-items-carousel in my application.

I have tried to configure one of the demo examples in my application.

This is the demo code

import React from 'react';
import range from 'lodash/range';
import styled from 'styled-components';
import ItemsCarousel from 'react-items-carousel;

const noOfItems = 12;
const noOfCards = 3;
const autoPlayDelay = 2000;
const chevronWidth = 40;

const Wrapper = styled.div`
  padding: 0 ${chevronWidth}px;
  max-width: 1000px;
  margin: 0 auto;
`;

const SlideItem = styled.div`
  height: 200px;
  background: #EEE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
`;

const carouselItems = range(noOfItems).map(index => (
  <SlideItem key={index}>
    {index+1}
  </SlideItem>
));

export default class App extends React.Component {
  state = {
    activeItemIndex: 0,
  };

  componentDidMount() {
    this.interval = setInterval(this.tick, autoPlayDelay);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  tick = () => this.setState(prevState => ({
    activeItemIndex: (prevState.activeItemIndex + 1) % (noOfItems-noOfCards + 1),
  }));

  onChange = value => this.setState({ activeItemIndex: value });

  render() {
    return (
      <Wrapper>
        <ItemsCarousel
          gutter={12}
          numberOfCards={noOfCards}
          activeItemIndex={this.state.activeItemIndex}
          requestToChangeActive={this.onChange}
          rightChevron={<button>{'>'}</button>}
          leftChevron={<button>{'<'}</button>}
          chevronWidth={chevronWidth}
          outsideChevron
          children={carouselItems}
        />
      </Wrapper>
    );
  }
}

The only difference is that i have changed

import ItemsCarousel from '../../src/ItemsCarousel';

to

import ItemsCarousel from 'react-items-carousel';

and i have called the component App and not AutoPlayCarousel

At the moment in the terminal the application is compiled successfully but in the browser i see the following 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 .

See the screenshot

I see in many threads that the cause of this error can be various, can you spot up my problem and what i am doing wrong?

Answer 1

Try providing the carouselItems as child elements

<Wrapper>
  <ItemsCarousel
    gutter={12}
    numberOfCards={noOfCards}
    activeItemIndex={this.state.activeItemIndex}
    requestToChangeActive={this.onChange}
    rightChevron={<button>{'>'}</button>}
    leftChevron={<button>{'<'}</button>}
    chevronWidth={chevronWidth}
    outsideChevron>

    {carouselItems}

  </ItemsCarousel>
</Wrapper>

Answer 2

I had to update to "react-dom": "^16.3.0"