TypeScript/React - Mapping over av array of objects

Question

I am trying to map over an array of objects received from the Unsplash API. I have read a bit about indexers in TypeScript but i am not sure i understand it completely. I have a stateless React component which receives a prop of state from parent. The value is a array of object. (see example from unsplash API). How do i define the shape of the object received from the API?

My code:

interface IProps {
    images: [{}];
}

interface IIMageUrls {
    image: {
        urls: { regular: string}
    }   
    [index: string]: any;
}

export default class ImageList extends React.Component<IProps, {}> {
    constructor(props: IProps) {
        super(props);
    }

    render() {
        this.props.images.map((image: IIMageUrls) => {
            return <img src={image.urls.regular} />
        });
    }
}

Example of the unsplash JSON:

{      
  "results": [       
      "urls": {
        "raw": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "full": "https://hd.unsplash.com/photo-1416339306562-f3d12fefd36f",
        "regular": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=92f3e02f63678acc8416d044e189f515",
        "small": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=263af33585f9d32af39d165b000845eb",
        "thumb": "https://images.unsplash.com/photo-1416339306562-f3d12fefd36f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=8aae34cf35df31a592f0bef16e6342ef"
      }
   ]
}

Solution/Final Code:

interface IImageUrls {
    [index: string]: string;
    regular: string;
}

interface IImage {
    urls: IImageUrls;
}

interface IProps {
    images: Array<IImage>;
}

export default class ImageList extends React.Component<IProps, {}> {
    constructor(props: IProps) {
        super(props);
    }

    render() {
        const images = this.props.images.map((image, index) => {
            return <img src={image.urls.regular} key={index} />;
        });
        return images;
    }
}

If I understand correctly, you are trying to make an interface for the object in result array? — Raz Luvaton
– Raz Luvaton, Commented Feb 3, 2019 at 15:13
That is correct. I am still new to typescript, and it's not always obvious to me how to deal with API reponse objects in typescript. — Frederick M. Rogers
– Frederick M. Rogers, Commented Feb 3, 2019 at 15:23

WayneC · Accepted Answer · 2019-02-03 15:26:04Z

1

Looks like you are looking for something like this:

interface IImageUrls {
  [index: string]: string
}

interface IImage {
  urls: IImageUrls;
}

interface IProps {
  images: Array<IImage>;
}

The urls property of IImage needs the index signature.

If you know regular will always be there, you can use:

interface IImageUrls {
  [index: string]: string;
  regular: string;    
}

Basically saying this interface always has regular, but can have other keys.

It depends how you need to use IImageUrls. If you will only ever need regular, then you don`t need the index signature and could just type it as:

interface IImageUrls {
  regular: string;    
}

edited Feb 3, 2019 at 15:26

answered Feb 3, 2019 at 15:15

WayneC

5,7402 gold badges35 silver badges44 bronze badges

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

5 Comments

Frederick M. Rogers Over a year ago

Where in the code would i make use of the interface? for image argument og the map callback function?

WayneC Over a year ago

If your props are typed as an array of IImage, then you don`t need to explicitly type the map callback, as it will flow through.

Frederick M. Rogers Over a year ago

That worked! However seams the native types for react are having some issues:

Property 'render' in type 'ImageList' is not assignable to the same property in base type 'Component<IProps, {}, any>'.   Type '() => void' is not assignable to type '() => ReactNode'.     Type 'void' is not assignable to type 'ReactNode'.

WayneC Over a year ago

you just need to return something from render, return the result of the map

Frederick M. Rogers Over a year ago

Thanks, i assumed the return inside the loop qualified. Now i know.

Collectives™ on Stack Overflow

TypeScript/React - Mapping over av array of objects

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related