Search code examples
reactjsreactstrap

how to add reactstrap carousel as child component directly or using async?

I'm using reactstrap in an application, but found some problem with react. The 

import CarouselExample from './Sliders/CarouselExample';

   render() {

    return (
        <React.Fragment>
            <div id="container">
                <CarouselExample />
            </div>

      </React.Fragment>
    );
  }
}

line reports a problem and I have no idea with it since I'm a newbie with react-redux. What should I do in my code?

I've grabbed the example code for a carousel from here: https://reactstrap.github.io/components/carousel/

Application built with 16.9.0", "react-dom": "^16.9.0", "react-redux": "^7.1.0", "reactstrap": "^8.0.1","redux": "^4.0.4" and "redux-thunk": "^2.3.0".

The container uses the react component, which is just repeating an image slider div.

Output: enter image description here

I tried to follow guides and looked up example implementations but could not solve the issue.

Solution

  • Looks like you are missing the bootstrap 4 dependency and CSS.

    Install bootstrap 4.3 dependency and import "bootstrap/dist/css/bootstrap.min.css" in your index.js file.

    Please see the sandbox for more details: https://codesandbox.io/s/tender-newton-vty2r

    Also beware of using id tags in JSX. It may cause issues when reusing a component. I prefer using refs. Hope this helps.