Skip to content

Commit

Permalink
#2.2 Dynamic Component Generation
Browse files Browse the repository at this point in the history
  • Loading branch information
soymi1k committed Dec 17, 2020
1 parent 7e1a761 commit 0c7b994
Show file tree
Hide file tree
Showing 2 changed files with 39 additions and 7 deletions.
2 changes: 1 addition & 1 deletion .eslintcache
Original file line number Diff line number Diff line change
@@ -1 +1 @@
[{"/Users/Eston/Documents/movie_app/src/index.js":"1","/Users/Eston/Documents/movie_app/src/App.js":"2"},{"size":201,"mtime":1608190112481,"results":"3","hashOfConfig":"4"},{"size":331,"mtime":1608193488316,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1qe6j1l",{"filePath":"8","messages":"9","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/Eston/Documents/movie_app/src/index.js",[],"/Users/Eston/Documents/movie_app/src/App.js",[]]
[{"/Users/Eston/Documents/movie_app/src/index.js":"1","/Users/Eston/Documents/movie_app/src/App.js":"2"},{"size":201,"mtime":1608190112481,"results":"3","hashOfConfig":"4"},{"size":1110,"mtime":1608196496727,"results":"5","hashOfConfig":"4"},{"filePath":"6","messages":"7","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1qe6j1l",{"filePath":"8","messages":"9","errorCount":0,"warningCount":1,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"/Users/Eston/Documents/movie_app/src/index.js",[],"/Users/Eston/Documents/movie_app/src/App.js",["10"],{"ruleId":"11","severity":1,"message":"12","line":5,"column":5,"nodeType":"13","endLine":5,"endColumn":26},"jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement"]
44 changes: 38 additions & 6 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,47 @@
function Food({ favourite }) {
return <h1>I like {favourite}</h1>;
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 className="App">
<h1>Hello!!!</h1>
<Food favourite="kimchi" />
<Food favourite="ramen" />
<Food favourite="samgiopsal" />
<Food favourite="chukumi" />
{foodILike.map(dish => (
<Food name={dish.name} picture={dish.image} />
))}
</div>
);
}
Expand Down

0 comments on commit 0c7b994

Please sign in to comment.