Search code examples
reactjsreact-hookscarouselreact-component

How to render a pure component dynamically in React?


I'm trying to render some pure components / a component which are basically RE charts in a carousel. So far I have implemented with images, but when I'm passing pure component / a component it is not showing anything.

I have created a sandbox which is having all the code which I have written so far with all the details SCSS, Re chart component and a main component. Please have a look and let me know what I'm missing or is there any other way where I can render components in a carousel.

Codesandbox URL


Solution

  • I'm not sure if this is what you are looking for.

    Check my sandbox

    The problem is that you need to define exactly the width and height of the svg also at its "containers", meaning that style={{ width: 500, height: 300 }} needs to be applied to li and ul too.

    Also i changed a little bit the transform slide width.