본문 바로가기

REACT

노마드 코더 props , map 기본 예제

import React from 'react';

function Food({name , picture}) {
 return <div>
   <h2>I like {name}</h2>
   <img src={picture} />
 </div>
}

const foodILike = [
  {
    name: "Kimchi",
    image:
      "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"
  },
  {
    name: "Samgyeopsal",
    image:
      "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"
  },
  {
    name: "Bibimbap",
    image:
      "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"
  },
  {
    name: "Doncasu",
    image:
      "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"
  },
  {
    name: "Kimbap",
    image:
      "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"
  }
];


function App() {
  return ( 
          <div>
          {foodILike.map(dish => (
          <Food name={dish.name} picture={dish.image} />
          ))}
          </div>
  );
}
export default App;

'REACT' 카테고리의 다른 글

노마드코더 useState 예제  (0) 2020.07.08
노마드 코더 state 와 componentDidMount와 componentDidUpdate 예제  (0) 2020.07.01
노마드 코더 props 기본 예제  (0) 2020.06.30
axios 예제  (0) 2020.06.07
Grid list 예제  (0) 2020.06.07