import React, {Component} from 'react';
import PropTypes from 'prop-types';
/**
* ExampleComponent is an example component.
* It takes a property, `label`, and
* displays it.
* It renders an input with the property `value`
* which is editable by the user.
*/
export default class ExampleComponent extends Component {
render() {
const {id, label, setProps, value} = this.props;
return (
<div id={id}>
ExampleComponent: {label}
<input
value={value}
onChange={e => {
/*
* Send the new value to the parent component.
* In a Dash app, this will send the data back to the
* Python Dash app server.
*/
if (setProps) {
setProps({
value: e.target.value
});
}
}}
/>
</div>
);
}
}
ExampleComponent.propTypes = {
/**
* The ID used to identify this compnent 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
};
|