From 3a6cf8589eeb1731effb1c386ef76d7bfb24f8f2 Mon Sep 17 00:00:00 2001
From: Jerel Miller <jmiller@newrelic.com>
Date: Thu, 11 Jun 2020 16:31:41 -0700
Subject: [PATCH] fix: Ensure Steps handles a single child. Use the Children
 utility instead

---
 src/components/Steps.js | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/Steps.js b/src/components/Steps.js
index 9e68e3151..5c5dd55a8 100644
--- a/src/components/Steps.js
+++ b/src/components/Steps.js
@@ -1,24 +1,14 @@
-import React from 'react';
+import { Children, cloneElement } from 'react';
 import PropTypes from 'prop-types';
+import { isMdxType } from '../utils/mdx';
 
 const Steps = ({ children }) => {
-  // get the number of steps
-  const totalSteps = children.filter(
-    (child) => child?.props?.mdxType === 'Step'
+  const totalSteps = Children.toArray(children).filter((child) =>
+    isMdxType(child, 'Step')
   ).length;
 
-  // return the children with additional props
-  return (
-    <>
-      {children.map((child, index) => ({
-        ...child,
-        props: {
-          ...child.props,
-          number: index + 1,
-          total: totalSteps,
-        },
-      }))}
-    </>
+  return Children.map(children, (child, index) =>
+    cloneElement(child, { number: index + 1, total: totalSteps })
   );
 };