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 -

my_dash_component/mydashcomponent.react.js

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

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

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 usage.py

usage.py -

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([

    my_dash_component.mydashcomponent(
      id='input',
      value='this is a text area',
   ),
html.Div(id='output')
])

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:

2 Likes

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.