diff --git a/.changeset/green-parents-argue.md b/.changeset/green-parents-argue.md new file mode 100644 index 000000000..5caabf365 --- /dev/null +++ b/.changeset/green-parents-argue.md @@ -0,0 +1,6 @@ +--- +"victory-chart": patch +"victory-core": patch +--- + +Fixed issue where VictoryChart would throw an unhandled exception when passed non-element children (fixes #2391) diff --git a/packages/victory-chart/src/helper-methods.tsx b/packages/victory-chart/src/helper-methods.tsx index b6f3b0f33..08fd4bfc9 100644 --- a/packages/victory-chart/src/helper-methods.tsx +++ b/packages/victory-chart/src/helper-methods.tsx @@ -133,7 +133,7 @@ export function getChildren(props, childComponents, calculatedProps) { const { origin, horizontal } = calculatedProps; const parentName = props.name || "chart"; - return childComponents.map((child, index) => { + return childComponents.filter(React.isValidElement).map((child, index) => { const role = child.type && child.type.role; const style = Array.isArray(child.props.style) ? child.props.style @@ -161,11 +161,10 @@ export function getChildren(props, childComponents, calculatedProps) { } export const getChildComponents = (props, defaultAxes?) => { - const childComponents = React.Children.toArray(props.children); - let newChildComponents = [...childComponents]; + let childComponents = React.Children.toArray(props.children); if (childComponents.length === 0) { - newChildComponents.push(defaultAxes.independent, defaultAxes.dependent); + childComponents.push(defaultAxes.independent, defaultAxes.dependent); } else { const axisComponents = { dependent: Axis.getAxisComponentsWithParent(childComponents, "dependent"), @@ -179,18 +178,18 @@ export const getChildComponents = (props, defaultAxes?) => { axisComponents.dependent.length === 0 && axisComponents.independent.length === 0 ) { - newChildComponents = props.prependDefaultAxes + childComponents = props.prependDefaultAxes ? [defaultAxes.independent, defaultAxes.dependent].concat( - newChildComponents, + childComponents, ) - : newChildComponents.concat([ + : childComponents.concat([ defaultAxes.independent, defaultAxes.dependent, ]); } } - return newChildComponents; + return childComponents; }; const getDomain = (props, axis, childComponents) => { diff --git a/packages/victory-core/src/victory-util/helpers.ts b/packages/victory-core/src/victory-util/helpers.ts index e1b06cf50..0b61e1b99 100644 --- a/packages/victory-core/src/victory-util/helpers.ts +++ b/packages/victory-core/src/victory-util/helpers.ts @@ -1,5 +1,5 @@ /* eslint-disable no-use-before-define */ -import React from "react"; +import React, { isValidElement } from "react"; import { defaults, isFunction, property, pick, assign, keys } from "lodash"; import { CallbackArgs } from "../types/callbacks"; import { ValueOrAccessor } from "../types/prop-types"; @@ -301,8 +301,10 @@ export function reduceChildren< return memo; }, initialMemo); }; - const childNames = children.map((c, i) => i); - return traverseChildren(children, childNames); + + const validChildren = children.filter(isValidElement); + const childNames = validChildren.map((c, i) => i); + return traverseChildren(validChildren, childNames); } /**