React - Map

Basic - Map

• Basic concept, similar with forEach

  numbers.map((num)=> {
    return num * 10;
  })
  

inline code

numbers.map(num => num * 10)

How to be used in React

• To render img in React, unique id needed

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

• can refactor like this way

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

Reminder

for

• init: let i = 0
• condition : i < numbers.length
• update

const numbers = [1,2,3,4,5];

let newNumList = [];
for (let i = 0; i < numbers.length; i++) {
	newNumList.push(numbers[i] * 10);
}

while

const numbers = [1,2,3,4,5];
let i = 0;
let newNumList = [];

while (i < numbers.length) {
  newNumList.push(numbers[i] * 10);
  i++;
}