✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Converting react component to dash, having problem passing list os divs to component

I’m new with Python and with Dash, but I have some experience with ReactJS.
I’m trying to create a component, converting from React to Dash, using this boilerplate:
https://github.com/plotly/dash-component-boilerplate

on this boilerplate i write my component with react, and when i run ‘npm run build’ my React component is converted to a Dash Component.

I want do build a carousel, using an existing React component inside my component, and I want to be able to pass a list os divs inside this component, on Dash

The “content” prop should be a list of divs

My react code:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider from "react-slick";
import './styles.scss'

export default class CarouselComponent extends Component {
    render() {

        const { dots, infinite, speed, slidesToShow, slidesToScroll, content } = this.props

        const settings = {
            dots: dots,
            infinite: infinite,
            speed: speed,
            slidesToShow: slidesToShow,
            slidesToScroll: slidesToScroll,
        };

        return (
            <Slider {...settings}>
                {content.map(item => (
                    <div>
                        {item}
                    </div>
                ))}
            </Slider>
        );
    }
}

CarouselComponent.defaultProps = {};

CarouselComponent.propTypes = {
    dots: PropTypes.bool,
    infinite: PropTypes.bool,
    speed: PropTypes.number,
    slidesToShow: PropTypes.number,
    slidesToScroll: PropTypes.number,
    content: PropTypes.any
};

After the component is converted to a Dash component, I use this component like this example:

import trich_components
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

data = [
    {
        'text': 'text 1',
        'color': 'red'
    },
    {
        'text': 'text 2',
        'color': 'blue'
    },
    {
        'text': 'text 3',
        'color': 'yellow'
    },
    {
        'text': 'text 4',
        'color': 'green'
    }
]

content = ([html.Div(i['text'], style={
           'backgroundColor': i['color']}) for i in data])

app = dash.Dash(__name__)

app.layout = html.Div([
    trich_components.CarouselComponent(
        content=content,
        dots=True,
        infinite=True,
        speed=500,
        slidesToShow=3,
        slidesToScroll=1,
    )
])


if __name__ == '__main__':
    app.run_server(debug=True)

My problem is:
I don’t know if I’m passing the list of Div’s in the right way, when I run the file I get this error:

Objects are not valid as a React child (found: object with keys {props, type, namespace}). If you meant to render a collection of children, use an array instead.
    in div (created by s)
    in div (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by t)
    in div (created by t)
    in div (created by t)
    in t (created by t)
    in t (created by s)
    in s (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by withRadiumContexts(UnconnectedComponentErrorBoundary))
    in withRadiumContexts(UnconnectedComponentErrorBoundary) (created by ConnectFunction)
    in ConnectFunction (created by TreeContainer)
    in TreeContainer (created by ConnectFunction)
    in ConnectFunction (created by TreeContainer)
    in div (created by u)
    in u (created by CheckedComponent)
    in CheckedComponent (created by TreeContainer)
    in UnconnectedComponentErrorBoundary (created by withRadiumContexts(UnconnectedComponentErrorBoundary))
    in withRadiumContexts(UnconnectedComponentErrorBoundary) (created by ConnectFunction)
    in ConnectFunction (created by TreeContainer)
    in TreeContainer (created by ConnectFunction)
    in ConnectFunction (created by UnconnectedContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in div (created by GlobalErrorOverlay)
    in div (created by GlobalErrorOverlay)
    in GlobalErrorOverlay (created by DebugMenu)
    in div (created by DebugMenu)
    in DebugMenu (created by UnconnectedGlobalErrorContainer)
    in div (created by UnconnectedGlobalErrorContainer)
    in UnconnectedGlobalErrorContainer (created by withRadiumContexts(UnconnectedGlobalErrorContainer))
    in withRadiumContexts(UnconnectedGlobalErrorContainer) (created by ConnectFunction)
    in ConnectFunction (created by UnconnectedContainer)
    in UnconnectedContainer (created by ConnectFunction)
    in ConnectFunction (created by UnconnectedAppContainer)
    in UnconnectedAppContainer (created by ConnectFunction)
    in ConnectFunction (created by AppProvider)
    in Provider (created by AppProvider)
    in AppProvider

I’ve tried everything that I could, but this error keep happening, I don’t know if I’m trying to do something impossible here, passing a list of Div’s, someone can help me please? I’ll really appreciate.

Have you tried PropTypes.node?

When I change to PropTypes.none the error is this bellow:
I don’t know if i’m passing my content props right

Invalid argument `content` passed into CarouselComponent.
Expected `object`.
Was supplied type `array`.
Value provided: 
[
  {
    "props": {
      "children": "text 1",
      "style": {
        "backgroundColor": "red"
      }
    },
    "type": "Div",
    "namespace": "dash_html_components"
  },
  {
    "props": {
      "children": "text 2",
      "style": {
        "backgroundColor": "blue"
      }
    },
    "type": "Div",
    "namespace": "dash_html_components"
  },
  {
    "props": {
      "children": "text 3",
      "style": {
        "backgroundColor": "yellow"
      }
    },
    "type": "Div",
    "namespace": "dash_html_components"
  },
  {
    "props": {
      "children": "text 4",
      "style": {
        "backgroundColor": "green"
      }
    },
    "type": "Div",
    "namespace": "dash_html_components"
  }
]

I believe that dash-renderer only allows you to pass other Dash components to the children prop, so you won’t be able to pass components to a prop called content. Either you’ll have to rename it or change the component to accept a list of dictionaries or similar (cf. dcc.RadioItems.options) which are then used internally by the component to create some particular HTML structure.

1 Like

It works passing to the children prop, thanks a lot for your help

1 Like