Target container is not a DOM element.(Carousel using ant design in react js)

Question

primeira parte e a classe app a outra parte é onde eu crio meu carousel, mas ele fica dando erro quando eu inicio o servidor Target container is not a DOM element.

first part and the app class The other part is where I create my carousel, but it keeps giving me an error when I start the server Target container is not a DOM element.

    import React, { Component } from "react";

    import "./styles.css";

    //import Header from "./components/Header/index";
    //import CriaCarousel from "./components/Carrousel/CriaCarousel";
    // import { Carousel } from "antd";
    // import { CarouselStyle } from "./components/Carrousel/styles";
    import CriaCarousel from "./components/Carrousel/CriaCarousel";

    class App extends Component {
      render() {
        return (
          <div className="App">
            <CriaCarousel />
          </div>
        );
      }
    }
    export default App;

import React, { Component } from "react";
//import ReactDOM from "react-dom";
//import { Settings } from "react-slick";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";

import { Carousel } from "antd";

//import "./styles.js";
import { CarouselStyle } from "./styles";

class CriaCarousel extends Component {
  render() {
    return ReactDOM.render(
      <Carousel autoplay="true">
        <CarouselStyle>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </CarouselStyle>
      </Carousel>
    );
  }
}

export default CriaCarousel;

Answer 1

This is because of this,

return ReactDOM.render( ... )

You cannot return this from your component. Instead you need to to render the top most component (App.js) to the dom. Read more about ReactDOM here

import ReactDOM from "react-dom";  //Import here

class App extends Component {
   render() {
     return (
        <div className="App">
           <CriaCarousel />
        </div>
     );
   }
}

ReactDOM.render(<App />, document.getElementById('root')) //This will render on actual DOM

And your child component should be,

class CriaCarousel extends Component {
  render() {
    return (
      <Carousel autoplay="true">
        //<CarouselStyle>    //I am not sure what is this doing, but I think you don't need it
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
       // </CarouselStyle>
      </Carousel>
    );
  }
}

And the CSS would be this,

.ant-carousel .slick-slide {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel .slick-slide h3 {
  color: #fff;
}

Demo