chore(misc): clean up instances of Array.apply (#9798)

* clean up instances of Array.apply

* rename item to value

Author: jenny-s51

packages/react-core/src/components/Nav/examples/NavFlyout.tsx

@@ -22,7 +22,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           <MenuItem onClick={onMenuItemClick} flyoutMenu={children} itemId={`nav-flyout-next-menu-${depth}`}>
             Next menu
           </MenuItem>
-          {Array.apply(0, Array(numFlyouts - depth)).map((_item, index: number) => (
+          {Array.from({ length: numFlyouts - depth }).map((_value, index) => (
             <MenuItem
               onClick={onMenuItemClick}
               key={`${depth}-${index}`}

packages/react-core/src/components/Nav/examples/NavHorizontalSubNav.tsx

@@ -11,7 +11,7 @@ export const NavHorizontalSubNav: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map((_value, index) => {
           const num = index + 1;
           return (
             <NavItem

packages/react-core/src/components/Nav/examples/NavLegacyTertiary.tsx

@@ -11,7 +11,7 @@ export const NavLegacyTertiary: React.FunctionComponent = () => {
   return (
     <Nav onSelect={onSelect} variant="tertiary" aria-label="Tertiary local">
       <NavList>
-        {Array.apply(0, Array(10)).map(function (_item, index: number) {
+        {Array.from({ length: 10 }).map(function (_value, index) {
           const num = index + 1;
           return (
             <NavItem

packages/react-core/src/components/Pagination/examples/PaginationSticky.tsx

@@ -27,8 +27,8 @@ export const PaginationSticky: React.FunctionComponent = () => {
   const buildCards = () => {
     const numberOfCards = (page - 1) * perPage + perPage - 1 >= itemCount ? itemCount - (page - 1) * perPage : perPage;
 
-    return Array.apply(0, Array(numberOfCards)).map((x, i) => (
-      <GalleryItem key={i}>
+    return Array.from({ length: numberOfCards }).map((_value, index) => (
+      <GalleryItem key={index}>
         <Card>
           <CardBody>This is a card</CardBody>
         </Card>

packages/react-core/src/demos/Banner.md

@@ -58,9 +58,9 @@ class BannerDemo extends React.Component {
           </PageSection>
           <PageSection>
             <Gallery hasGutter>
-              {Array.apply(0, Array(30)).map((x, i) => (
-                <GalleryItem key={i}>
-                  <Card key={i}>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
                     <CardBody>This is a card</CardBody>
                   </Card>
                 </GalleryItem>
@@ -133,7 +133,7 @@ class BannerDemo extends React.Component {
               </PageSection>
               <PageSection>
                 <Gallery hasGutter>
-                  {Array.apply(0, Array(30)).map((x, i) => (
+                  {Array.from({ length: 30 }).map((_value, index) => (
                     <GalleryItem key={i}>
                       <Card key={i}>
                         <CardBody>This is a card</CardBody>

packages/react-core/src/demos/examples/BackToTop/BackToTopNameDemo.tsx

@@ -41,9 +41,9 @@ export const Name = () => {
           aria-label="Scrollable container of demonstration cards with a back to top element"
         >
           <Gallery hasGutter>
-            {Array.apply(0, Array(60)).map((_x: any, i: number) => (
-              <GalleryItem key={i}>
-                <Card key={i}>
+            {Array.from({ length: 60 }).map((_value, index) => (
+              <GalleryItem key={index}>
+                <Card key={index}>
                   <CardBody>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum et urna eget semper. Sed
                     tincidunt purus diam, id sollicitudin est pellentesque eget. Ut eget massa dignissim dolor pretium

packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -543,8 +543,8 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     >
       <PageSection>
         <Gallery hasGutter>
-          {Array.apply(0, Array(10)).map((x, i) => (
-            <GalleryItem key={i}>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
               <Card>
                 <CardBody>This is a card</CardBody>
               </Card>

packages/react-core/src/demos/examples/Nav/NavDefault.tsx

@@ -83,7 +83,7 @@ export const NavDefault: React.FunctionComponent = () => {
         </PageSection>
         <PageSection>
           <Gallery hasGutter>
-            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+            {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
                 <Card>
                   <CardBody>This is a card</CardBody>

packages/react-core/src/demos/examples/Nav/NavExpandable.tsx

@@ -109,7 +109,7 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         </PageSection>
         <PageSection>
           <Gallery hasGutter>
-            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+            {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
                 <Card>
                   <CardBody>This is a card</CardBody>

packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx

@@ -222,7 +222,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
         </PageSection>
         <PageSection>
           <Gallery hasGutter>
-            {Array.from({ length: 10 }, (_value: any, index: React.Key) => (
+            {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>
                 <Card>
                   <CardBody>This is a card</CardBody>