How to pass dash components to my own componenets via props

Dash Python
1

I’m creating a carousel component using a react lib. I want to insert an existing dash component inside each element of this carousel, like this:

{element} = this.props;

<div className="demo-4 medium">
    <Carousel interval="4000" type="card" height="300px" autoplay={false}>
    {
        [1,2,3,4,5,6].map((item, index) => {
        return (
            <Carousel.Item key={index}>
                   element // I want to insert the received component here
            </Carousel.Item>
        )
        })
    }
    </Carousel>
</div>

CarouselComponent.defaultProps = {};

CarouselComponent.propTypes = {
   content : PropTypes.object;  // which type ?????
}

Which kind of propType element should it be (array, object, etc) and what is the correct way to insert it on the carousel item?

1 Like
2

At the moment it’s only possible to pass other components as the children prop. There’s been some work done on changing that at different times, but afaik they haven’t made it past the experiment stage yet?

EDIT - in your case that’s ok though right? You can pass the items as the children. In which case you can probably do something like

<div className="demo-4 medium">
  <Carousel interval="4000" type="card" height="300px" autoplay={false}>
    {
      children.map((item, index) => {
        return (
          <Carousel.Item key={index}>
            {item}
          </Carousel.Item>
        )
      })
    }
  </Carousel>
</div>

The type of children should be PropTypes.node

CarouselComponent.propTypes = {
  children : PropTypes.node
}
1 Like
3

@tcbegley The map function didn’t work. I tried to render just returning one node and it works, how to pass a array of nodes to react ?

4

Strange, if anything I would have expected it to work the other way around, i.e. work with multiple children but not with just one…

It might be helpful to compare with the implementation of dcc.Tabs which is doing something similar to what you want to do (i.e. take a bunch of tab components as children and call map on them).

1 Like