React Practice(4-3)

App.js

import React, {useState} from "react";
const Counter = ()=>{
    const [number,setNumber] = useState(0) 

    const onIncrease =()=>{
        setNumber(number+1)
    }
    const onDecrease =()=>{
        setNumber(number-1)
    }

    const Change = (num)=>{
        setNumber(number + num)
    }
    
    return(
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>+1</button>
            <button onClick={onDecrease}>-1</button><br/>

            <button onClick={()=>Change(1)}>1증가</button>
            <button onClick={()=>Change(-1)}>1감소</button>

        </div>
    )
}
export default Counter;

 

Child.js

const Child  =({comment})=>{
    return(
        <div>
            comment : {comment}
        </div>
    )

}
export default Child;

 

Food.js

import './App.css';
import Counter from './Counter';
import InputSample from './InputSample';
import InputTest from './InputTest';
import Parent from './Parent';
import Say from './Say';

function App() {
  return (
    <div>
    <InputSample/><hr/>
    <InputTest/><hr/>
    <Say/><hr/>
    <Counter/><hr/>
    <Parent/>
    </div>
  );
}

export default App;

 

Food1.js

import './App.css';
import Counter from './Counter';
import InputSample from './InputSample';
import InputTest from './InputTest';
import Parent from './Parent';
import Say from './Say';

function App() {
  return (
    <div>
    <InputSample/><hr/>
    <InputTest/><hr/>
    <Say/><hr/>
    <Counter/><hr/>
    <Parent/>
    </div>
  );
}

export default App;

 

Parent.js

import Child from "./Child";
import Food from "./Food";
import Food1 from "./Food1";

const Parent =()=>{
    let comments = ["comment01", "comment02", "comment03"]
    const foodILike = [
    {
      id: 1,
      name: 'Kimchi',
      image: 'http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg',
      rating: 5,
    },
    {
      id: 2,
      name: 'Samgyeopsal',
      image:
        'https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg',
      rating: 4.9,
    },
    {
      id: 3,
      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',
      rating: 5,
    },
    {
      id: 4,
      name: 'Doncasu',
      image: 'https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg',
      rating: 5,
    },
    {
      id: 5,
      name: 'Kimbap',
      image: 'http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg',
      rating: 5,
    },
  ]

    return(
        <div>
            {/* {
                comments.map((comment,icon)=>{
                    return(
                        <div key={i}>
                        {comment}
                        </div>
                    )
                })
            } */}


            {

                comments.map((comment,i)=>( // (는 return 생략가능
                    <Child comment = {comment} key={i}/>
                ))
            }

            {
                foodILike.map((food)=>(
                    <Food key={food.id} food = {food}/>
                ))
            }
            <hr/>
            {
                foodILike.map((food)=>(
                    <Food1 key={food.id}
                    id={food.id}
                    name={food.name}
                    picture={food.image}
                    rating={food.rating}/>
                ))
            }
        </div>
    )
}
export default Parent;