How to display some text before a value from a Dash callback?

Question

Using Plotly Dash, I have line html.H6(id='output_div') that displays an integer (say 10).

I would like to display some text before that integer (say "This is integer"). I can’t use {}.format() in the callback function because I need to input that integer in another callback function.

How could I modify html.H6(id='output_div') to display "This is integer 10" on a single line instead of "10"?

Answer 1

Using html.Span is one way.

Your layout would contain:

html.H6(
    id='output-1',
    children=[
        'This is integer ',
        html.Span(id='output-2', children=''),
    ]
)

And your callback out output the integer only to 'output-2'. You could then use the children of 'output-2' as an Input elsewhere to read that integer back into a callback. You could also update the 'output-1' children prop if you need to change that to say something like "This is a float" or "This is a string".