React with Typescript : Error on a map in the image array

Asked

Viewed 405 times

-1

Interface:

interface CompanyDetails {
 company: {
   id: number;
   name: string;
   description: string;
   whatsapp: string;
   instagram: string;
   email: string;
 },
 filesCompany: [
 {
   url: string;
   name: string;
   path: string;
   size: string;
   wallpaper: boolean;
   createdAt: string;
   updatedAt: string;
  }]
}

Dice:

"filesCompany": [
{
  "url": "http://localhost:3333/files/6f121ec40c15d7e3b0e07002483cca21.png",
  "id": 55,
  "name": "1.png",
  "path": "6f121ec40c15d7e3b0e07002483cca21.png",
  "size": "97473",
  "wallpaper": false,
  "createdAt": "2020-06-07T22:49:11.250Z",
  "updatedAt": "2020-06-07T22:49:11.250Z",
  "company_id": 24
},
{
  "url": "http://localhost:3333/files/e0b01fbbcd1082d373672752df14e066.png",
  "id": 68,
  "name": "1.png",
  "path": "e0b01fbbcd1082d373672752df14e066.png",
  "size": "97473",
  "wallpaper": false,
  "createdAt": "2020-06-08T01:49:03.141Z",
  "updatedAt": "2020-06-08T01:49:03.141Z",
  "company_id": 24
}]

When trying to run this code snippet:

 {company?.filesCompany.map(image => {
     <img key={image.createdAt} src={image.url} alt="Imagens dos produtos da empresa" />
     })
 }

Returns this error:

FALHA AO COMPILAR
./src/pages/CompanyInfo/index.tsx
Line 199:17:  Expected an assignment or function call and instead saw an expression

I have no idea what this is about. At first, I imagined it was about the key of the values, and then I even tried to put the images inside a list but it results in the same error. These images are for a carousel and I used this package:

React-Responsive-Carousel -> package link

I don’t know if there are better packages, but I liked this for the integration with typescript.

Link in Gist -> https://gist.github.com/Jackie098/c13d2a277cf97448d3533b1723d0a104

typescript react

  • {company?.filesCompany.map(image => &#xA; <img key={image.createdAt} src={image.url} alt="Imagens dos produtos da empresa" />&#xA; )&#xA; }, without keys and with the < on the img side, that would not be the way?

  • Sorry, when copying and pasting my code, I ended up not putting the sign: "<". But when checking my code, everything is correct.

1 answer

0

Guys, I got this. The problem was only in Arrow Function, instead of me not putting anything or even putting a parentese around the "Return", I put keys, which made the program expect an explicit RETURN.

Instead:

 {company?.filesCompany.map(image => {
 <img key={image.createdAt} src={image.url} alt="Imagens dos produtos da empresa" />
 })

}

I should:

 {company?.filesCompany.map(image => (
 <img key={image.createdAt} src={image.url} alt="Imagens dos produtos da empresa" />
 ))

}

Or even not put anything, but would be no line break and would be boring to read:

     {company?.filesCompany.map(image => <img key={image.createdAt} src={image.url} alt="Imagens dos produtos da empresa" />)}

Browser other questions tagged typescript react

You are not signed in. Login or sign up in order to post.