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.
