✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
πŸ‡ Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Using a dash-core-component within a custom component

I am trying to create my own dash component in React, and within that component, I want to hold a plotly graph. However, I cannot for the life of me work out how to import the Graph component from dash-core-components into my own!

Below is the closest I think I have gotten, it builds just fine - but when I run the usage.py I get an error stating:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

GraphTest.react.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Graph} from 'dash-core-components';

/**
 * 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 GraphTest extends Component {
    render() {
        const newFigure = {
            data: [{'x': [1, 2, 3], 'y': [1, 2, 1]}]
        };
        return (
            <Graph id="graph" figure={newFigure} />
        );
    }
}

GraphTest.defaultProps = {};

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

usage.py

import dash_fix
import dash
from dash.dependencies import Input, Output
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([

    dash_fix.GraphTest(id="graph")

])

if __name__ == '__main__':

    app.run_server(debug=True)

I have of course installed dash-core-components with npm, and I’ve also tried changing the import name to various things such as {PlotlyGraph} as that is what it is exported as in Graph.react.js, and also importing from dash-core-components/lib etc. Nothing works!

This is within a brand new dash-component-boilerplate project, so you can easily attempt to recreate the issue yourself if needed.

Any help would be greatly appreciated!

2 Likes