[Udemy] searching xx - 8

key list

• 콘솔창에 에러가 뜨는데..

• what gets sent back over to us from the API you'll notice that every single one of these objects has an IP property that uniquely identifies it.

<imageList.js>

import React from 'react';

const ImageList = props => {
  const images = props.imageList.map(image => {
    return <img key={image.id} src={image.urls.regular} />;
  });
  return <div>{images}</div>;
};

export default ImageList;

• we only have to assign the key to the root element that we are returning from a list of records or already in a list of different components.

<imageList.js>

import React from 'react';

const ImageList = props => {
  const images = props.imageList.map(image => {
    return (
      <img alt={image.description} key={image.id} src={image.urls.regular} />
    );
  });
  return <div>{images}</div>;
};

export default ImageList;

• you'll notice that we're referencing the "image" variable three time inside this mapping function.
  so rather than keeping on referencing that variable again and again and again we can just do restructure out the three properties we care about inside of this inner function description ID and you or else to do so i'll find that "image" argument.

<imageList.js>
destructuring

import React from 'react';

const ImageList = props => {
  const images = props.imageList.map(({ description, id, urls }) => {
    return <img alt={description} key={id} src={urls.regular} />;
  });
  return <div>{images}</div>;
};

export default ImageList;