Mapping through an object in Typescript

January 18, 2023

I tried looking up some guides but they didn’t provide any substantial data.
This is my setup in JSX..

Object:

export const Project1 =[ 
    {
        name: 'Interior Design Website',
        description: 'Responsive and minimalistic',
        tech:[
            'imgurl.com',
            'img2url.com',
            'img3url.com',
        ]
    },

    {
        name: 'Exterior Design Website',
        description: 'Responsive and minimalistic',
        tech:[
            'imgurl.com',
            'img2url.com',
            'img3url.com',
        ]
    },
    {
        name: 'Furniture Design Website',
        description: 'Responsive and minimalistic',
        tech:[
            'imgurl.com',
            'img2url.com',
            'img3url.com',
        ]
    }
]

Component:

import {Project1} from '@/data'
import ProjectArticle from './ProjectArticle'

<div>
        {Project1.map((project,index)=>(
            <ProjectArticle
                index={index}
                {...project}
            />
        ))}


</div>

Widget:

type Props = {}

export default function ProjectArticle({}: Props) {
  return (
    <div>Work with object data</div>
  )
}

Obviously this won’t work because that’s not how Typescript functions. I really don’t like asking people to do my homework but I’m absolutely stuck even after spending 2 hours of reading documentation. I would appreciate even the smallest amount of guidance!

I tried using conventional JS logic but it’s completely incompatible(rightfully so).

>Solution :

Component:

import {Project1} from '@/data'
import ProjectArticle from './ProjectArticle'

<div>
  {Project1.map((project, index)=>(
     <ProjectArticle index={index} project={project} />
   ))}
</div>

Widget:

type Project = {
  name: string;
  description: string;
  tech: string[];
}

type Props = {
 project: Project;
}

export default function ProjectArticle({project}: Props) {
  return (
   <div>
    <div>Name: {project.name}</div>
    <div>Description: {project.description}</div>
    <div>Tech:</div>
    <div>{project.tech.map((item: string) => <p key={item}>{item}</p>)}</div>
  </div>
  )
}