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?


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

import {
} 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(() => { TestArrayObject) => {
      setTestArray([...testArray, arr])
  }, [])

  const listArray = => {
    return (

          Keep close to Nature's heart... {arr.age}

  return <>{ listArray }</>

export default ExploreContainer```

Does a console.log on testArrsy show 2 items? If not, maybe something wrong in the useEffect.

I don’t know React patterns but that would be my debug action

Hi @gnai-creator,

can you see the html element in the DOM? Right click on the list item, then click on “inspect”.

@Hello @mariusbolik,

I solved the problem changing the order of the map function.

The bug was mine.

Thank you very much!