Renderizando Listas

[vanderleipinto]

Renderizando Listas

Criaremos um arquivo src/types/Person.ts onde teremos o type de Person

export type Person = {
  id:number,
  name:string,
  profession: string;  
}

Criaremos um arquivo src/data/peopleList.ts onde teremos uma lista do type Person:

import { Person } from "@/types/Person";

export const peopleList:Person[] = [
  {id: 1 ,name: 'Fulano', profession: 'mathematician'},
  {id: 2, name: 'Ciclano', profession: 'chemist'},
  {id: 3, name: 'Beltrano', profession: 'physicist'},
  {id: 4, name: 'Glutano', profession: 'chemist'},
  {id: 5, name: 'Jungulano', profession: 'astrophysicist'}
]

Para renderizar essa lista usaremos o recurso map() dentro da page.tsx

import { peopleList } from '@/data/peopleList'

function Page(){

  return(
    <div>
      <h1>Olá mundo</h1>
      {peopleList.length > 0 && 
        <ul>
          {peopleList.map(person => 
              <li key={person.id}> {person.name} - {person.profession}</li>
            )}
        </ul>
      }
    </div> 
  )
}

export default Page;  

[vanderleipinto]

Person.tsx

type Props = {
  name: string,
  avatar?: string,
  roles: string[],
  address?: string //valor opcional, pode ou não receber valores por parâmetros.
}

export const Person = ({name, 
  avatar = 'https://st3.depositphotos.com/1767687/17621/v/1600/depositphotos_176214104-stock-illustration-default-avatar-profile-icon.jpg', 
  roles
}: Props) => {

  return (
      <>
        <h1>{name}</h1>
        <img 
          src={avatar}
          alt={name}
          className="w-40"
        />

        <ul>
          <li>{roles[0]}</li>
          <li>{roles[1]}</li>
        </ul>

      </>

    )
}