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.