1

I want to generate a list of table rows by using forEach() in Typescript and React. I get Property 'forEach' does not exist on type when using the code below. Does anyone know how to fix this? Shouldn't I be able to use forEach() on persons as it is an array of PersonInterfaces?

interface PersonList {
  [index: number]: PersonInterface
}

interface PersonInterface {
  name: string, 
  age: number
}

const persons:PersonList = [
  {
    name: 'John',
    age: 25,
  }, {
    name: 'Jill',
    age: 28,
  }
];

export default function Table() {
  return (
    <table>
      {
        persons.forEach(person => {
          return (
            <tr>
              <td>{person.name}</td>
            </tr>
          );
        })
        }
    </table>
  );
}
jessica96
  • 45
  • 1
  • 4

3 Answers3

3

You can do something like this:-

interface Person {
  name: string, 
  age: number
}

const persons:Person[] = [
  {
    name: 'John',
    age: 25,
  }, {
    name: 'Jill',
    age: 28,
  }
];

export default function Table() {
  return (
    <table>
      {
        persons.forEach(person => {
          return (
            <tr>
              <td>{person.name}</td>
            </tr>
          );
        })
        }
    </table>
  );
}

Your persons variable was not a valid array object. You have sets its type to PersonList which itself is essentially a type. That's why you're getting Property 'forEach' doesn't exist on type.

One more thing, forEach doesn't return a new array. Use map here instead of forEach.

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
1

As well as your typing problem, I'm guessing you want to use array.map instead of array.forEach.

import React from 'react'

interface PersonInterface {
  name: string
  age: number
}

const persons: PersonInterface[] = [
  {
    name: 'John',
    age: 25,
  },
  {
    name: 'Jill',
    age: 28,
  },
]

const Table = () => {
  return (
    <table>
      {persons.map(person => (
        <tr>
          <td>{person.name}</td>
        </tr>
      ))}
    </table>
  )
}

export default Table
ksav
  • 20,015
  • 6
  • 46
  • 66
0

forEach is a method from JS Class Array, if you want to use it in a custom Class, it should inherit from Array or just be one (persons:Person[]), as suggested by Lakshya.

iosis555
  • 31
  • 3