How to pass props as a HTML tag to react element in dash plotly

I am working on a dash project. I just learned Create your own components in dash.I created a simple component ie - textarea . Followiing is the code of component -


import React, {Component} from 'react';
import PropTypes from 'prop-types';
export default class mydashcomponent extends Component {

    const {id,setProps,value} = this.props;
    <div id={id}>
       <textarea cols="150" rows="45" value={value} onChange={e => {
                     if (setProps) {
                    } else {
                }} />

mydashcomponent.defaultProps = {};

mydashcomponent.propTypes = {
   * The ID used to identify this component in Dash callbacks
   id: PropTypes.string,

   * A label that will be printed when this component is rendered.
   //label: PropTypes.string.isRequired,

   * The value displayed in the input
   value: PropTypes.string,

   * Dash-assigned callback that should be called whenever any of the
   * properties change
   setProps: PropTypes.func

I am using this component in -

import my_dash_component
import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)

app.scripts.config.serve_locally = True
app.css.config.serve_locally = True

app.layout = html.Div([

      value='this is a text area',

My problem is when I pass the value (props) as a plain text it works fine. But when i pass value as a html tag(ie. value=<h2>This is a text area</h1> ) , it is giving invalid syntax error. How can i pass the value as a html tag?

Thank You. Regards.

HI, you need to use PropTypes.node :slightly_smiling_face:


You can pass nodes down as children, just like a Div. access that them via props.children (standard React). I recently did that and it worked fine. I had trouble passing React nodes down as props. I am not sure that is supported. The component worked fine in plain js but not when interfaced via python.