How to fix TypeError TypeError: can only concatenate str (not "list") to str with Dash

Dash Python
1

I am trying to create an image slider for my Dash app, but I get the following error: TypeError - TypeError: can only concatenate str (not "list") to str

I looked through my code to see if any of the children are not wrapped up properly but they looked good, or maybe I am missing something? What could I be possibly be doing wrong?

Here is code below:

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__,

                external_stylesheets = dbc.themes.BOOTSTRAP)

#app = dash.Dash(__name__, 

                #external_stylesheets=[dbc.themes.BOOTSTRAP])

slider = html.Div(className = "hero-slider",
        children = [
            html.Div(className = "owl-hero-slider owl-carousel owl-theme",
                children = [
                    html.Div(className = "item",
                        children = [
                            html.Div(className = "hero-image",
                                style = {
                                    "background-image": "url(assets/img/slide-2.jpg)"
                                }),

                            html.Div(className = "hero-slider-content",
                                children = [
                                    html.Div(className = "container",
                                        children = [
                                            html.Div(className = "row",
                                                children = [
                                                    html.Div(className = "upSection animated slideOutUp",
                                                        children = [
                                                            html.Div("great", className = "text-top"),
                                                            html.Div("testing1", className = "text-mid"),
                                                            html.Div("why", className = "slider-line")
                                                        ]),

                                                    html.Div(className = "downSection animated slideOutDown",
                                                        children = [
                                                            html.Div("build test", className = "text-bottom"),
                                                            html.A(className = "home-move-button", href = "#"),
                                                        ])
                                                ])
                                        ])
                                ])
                        ]),

                    html.Div(className = "item",
                        children = [
                            html.Div(className = "hero-image",
                                style = {
                                    "background-image": "url(assets/img/slide-1.jpg)"
                                }),
                            html.Div(className = "hero-slider-content",
                                children = [
                                    html.Div(className = "container",
                                        children = [html.Div(className = "row",
                                                children = [
                                                    html.Div(className = "upSection animated slideOutUp",
                                                        children = [
                                                            html.Div("Second slider 2", className = "text-top"),
                                                            html.Div("We are just testing", className = "text-mid"),
                                                            html.Div("Yeah we go", className = "slider-line")
                                                        ]),

                                                    html.Div(className = "downSection animated slideOutDown",
                                                        children = [
                                                            html.Div("build test", className = "text-bottom"),
                                                            html.A(className = "home-move-button", href = "#"),
                                                        ])

                                                ])
                                        ])
                                ])
                        ]),

                ])
        ])


app.layout = html.Div(
    id="slider-app",
    children= slider,

)

if __name__ == '__main__':
    app.run_server(debug=True,
                   use_reloader=False, 
                   port=8080)
2

Hi @John-A

Looks like you are missing a [ ] . If you use un-comment this line, it will eliminate that error message

#app = dash.Dash(__name__, 

                #external_stylesheets=[dbc.themes.BOOTSTRAP])
3

Thank you very much, this worked

1 Like