Fixed issue where VictoryChart would throw an unhandled exception whe… (#2536)

Co-authored-by: grose <gwyneth.rose@formidable.com>

Author: gwynethrose

.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)

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) => {

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);
 }
 
 /**