Destructuring an array

import React from "react";

const ImageList = (props) => {
  const images = props.images.map((image) => {
    //place the key property on the root element (the wrapper if there is one!)
    return (
      <img key={image.id} src={image.urls.regular} alt={image.description} />
    );
  });
  return <div>{images}</div>;
};

export default ImageList;

can be refactored by destructuring the array when calling the .map function

import React from "react";

const ImageList = (props) => {
  const images = props.images.map(({ description, id, urls }) => {
    //place the key property on the root element (the wrapper if there is one!)
    return <img key={id} src={urls.regular} alt={description} />;
  });
  return <div>{images}</div>;
};

export default ImageList;

Add your comment