all files / components/ ExampleComponent.react.js

95.83% Statements 46/48
94.29% Branches 33/35
90.91% Functions 10/11
75% Lines 6/8
4 statements, 14 branches Ignored     
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61                                                                                                                
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
};