Is this an Array of Object BUG?

I think this example speaks for itself… I don`t know why it does not render the 2 arrays values, only the last.

Being cracking my head for 24hours, trying to figure out how to solve this, but i dont know. Could anyone help me?

Thanks!

How to reproduce: Blank Template And paste this code on ExploreContainer.tsx

import {
  IonCard,
  IonCardHeader,
  IonCardSubtitle,
  IonCardTitle,
  IonCardContent,
} from '@ionic/react'
import { useEffect, useState } from 'react'
import './ExploreContainer.css'

interface ContainerProps {}

interface TestArrayObject {
  key: string
  id: string
  name: string
  age: number
}

const ExploreContainer: React.FC<ContainerProps> = () => {
  const [testArray, setTestArray] = useState<TestArrayObject[]>([])

  const arraySample: TestArrayObject[] = [
    {
      key: '1',
      id: '12345',
      name: 'Jack',
      age: 40,
    },
    {
      key: '2',
      id: '67890',
      name: 'Black',
      age: 30,
    },
  ]

  useEffect(() => {
    arraySample.map((arr: TestArrayObject) => {
      setTestArray([...testArray, arr])
    })
  }, [])

  const listArray = testArray.map((arr) => {
    return (
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>{arr.id}</IonCardSubtitle>
          <IonCardTitle>{arr.name}</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          Keep close to Nature's heart... {arr.age}
        </IonCardContent>
      </IonCard>
    )
  })

  return <>{ listArray }</>
}

export default ExploreContainer```

4 posts - 3 participants

Read full topic