How to render a list returned from callback output

Callback Output returns a list of strings. The question is how to render each element of the list in a different row, for example in dbc.Card:

            dbc.ListGroupItem("Item 1"),
            dbc.ListGroupItem("Item 2"),
            dbc.ListGroupItem("Item 3"),
    style={"width": "18rem"},

The callback looks like this one:

    Output('hover-data', 'children'),
    Input('crossfilter-teams-scatter', 'hoverData'))
def display_hover_data(hoverData):
	t1 = hoverData.get('points')[0].get('hovertext')
	t1 = t1.split(',')
	return t1

What is the object type with id of “hover-data” in your app layout? You’re currently targeting the children property of that UI element and passing in a list from the callback function as output. Not sure if that UI element takes a list as its children.

I’d be happy if you could suggest a UI element that takes a list from the callback.

Can you elaborate a little further what you’re trying to accomplish overall? It’s a little difficult to provide specific solution(s) without knowing what you’re implementing.

Okay. thank you

the callback returns a list of strings
[line1, line2].

I would like that the UI element will present one line and then the other one bellow it. something simple like:

line 1: aaaaaa bbbbb ccccc
line 2: ddddd eee fffff

I’m still not clear what you’re trying to implement but here is a trivial implementation that shows how to target a dbc.Card (or sub-items inside it). Click the button to see how the text changes using a list in the callback:

import dash
import dash_bootstrap_components as dbc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash_html_components.Br import Br
from dash import no_update

app = dash.Dash(__name__)

app.layout = html.Div(
                                            html.H4("Card title", className="card-title"),
                                                "Some quick example text to build on the card title and "
                                                "make up the bulk of the card's content.",
                                        ], id="my_card_body")
        dbc.Button("Click", id="my_button")


def update_card_body(n_clicks):
    if n_clicks is None:
        return no_update
    my_list = ["hello", "hi", "bye"]
    new_card_content = [html.Li(x) for x in my_list]
    new_card_body = [
        html.H4("Card title", className="card-title")] + new_card_content
    return new_card_body

if __name__=="__main__":
1 Like

Thank you very much, that did the trick for me