dash-components-archetype
dash-components-archetype copied to clipboard
Support React 16 as a dependency
Issue
When using dash-components-archetype
to build a custom Dash component, writing React 16 code occasionally causes weird behavior with components (note that this also includes a custom webpack config and a different .babelrc file for Flow type hinting, although the issue is definitely in the React versioning).
Example
Using the DropdownMenu
and MenuItem
components from material-ui as
<DropDownMenu value={this.state.dropdownValue} onChange={this.handleChange}>
<MenuItem value={1} primaryText="Never" />
<MenuItem value={2} primaryText="Every Night" />
<MenuItem value={3} primaryText="Weeknights" />
<MenuItem value={4} primaryText="Weekends" />
<MenuItem value={5} primaryText="Weekly" />
</DropDownMenu>
throws Error: parentComponent must be a valid React Component
when clicking on the dropdown. Everything works as intended when the custom Dash component uses the same version of React as dash-components-archetype
.
A similar error is thrown when using a Dialog
component.
Proposed solution
Change "react": "^15.5.4"
in package.json
to something like "react": "^15.5.0 || ^16.1.0"
(or whatever versions are desired). React 16 is now the preferred major version.
Temporary fix
Make it more obvious that a developer must have React 15.5.4 to ensure everything works.