Destructure object properties inside Array.prototype.map()

Question

I am using Next.js and mapping out some components with the below code. All works as it should but I would really like to destrcuture the object properties here to not be repeating the paths inside my props

 {sortedData.map((service) => (
          <Article
            key={uuidv4()}
            title={service.fields.title}
            image={service.fields.thumbnail.fields.file.url}
            alt={service.fields.thumbnail.fields.file.fileName}
            slug={service.fields.slug}
            content={service.fields.intro}
            height={service.fields.thumbnail.fields.file.details.image.height}
            width={service.fields.thumbnail.fields.file.details.image.width}
          />
        ))}

I tried looking for similar questions here but could not find any. Any help is appreciated

If you don't know how to do destructuring, use the standard approach and introduce temporary variables: service => { const fields = service.fields; const thumbFile = fields.thumbnail.fields.file; return …; } — Bergi
– Bergi, Commented Jan 4, 2021 at 17:05

anlijudavid · Accepted Answer · 2021-01-04 16:07:58Z

2

Desestructure service object, example:

   {sortedData.map(({ fields: { title, thumbnail, slug, intro } }) => (
      <Article
        key={uuidv4()}
        title={title}
        image={thumbnail.fields.file.url}
        alt={thumbnail.fields.file.fileName}
        slug={slug}
        content={intro}
        height={thumbnail.fields.file.details.image.height}
        width={thumbnail.fields.file.details.image.width}
      />
    ))}

answered Jan 4, 2021 at 16:07

anlijudavid

5397 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Destructure object properties inside Array.prototype.map()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related