From 8ce3ef6a3045de2eed45a9e4e6a62021109cd37b Mon Sep 17 00:00:00 2001 From: Gwyneth Rose Date: Mon, 8 Jan 2024 14:16:02 -0700 Subject: [PATCH] =?UTF-8?q?Fixed=20issue=20where=20VictoryChart=20would=20?= =?UTF-8?q?throw=20an=20unhandled=20exception=20whe=E2=80=A6=20(#2536)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: grose --- .changeset/green-parents-argue.md | 6 ++++++ packages/victory-chart/src/helper-methods.tsx | 15 +++++++-------- packages/victory-core/src/victory-util/helpers.ts | 8 +++++--- 3 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 .changeset/green-parents-argue.md 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); } /**