dash-components-archetype icon indicating copy to clipboard operation
dash-components-archetype copied to clipboard

Support React 16 as a dependency

Open mjclawar opened this issue 7 years ago • 5 comments

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.

mjclawar avatar Nov 29 '17 15:11 mjclawar