props, value, map

import React from "react";
import ChartBar from "./ChartBar";
import "./Chart.css"


const Chart = props => {
    return (
        <div className="chart">
        {props.dataPoints.map((dataPoint) => (
            <ChartBar
                key = {dataPoint.id} //id혹은 dataPoint.label로 줄 수도 있다 .
                					//고유의 라벨이 존재함.
                value={dataPoint.value}
                maxValue={null} 
                label = {dataPoint.label} //1월 2월 3월 이런식으로 표시할 수 있도록 라벨을 만들어줌

            />))}
    </div>
    );
};

export default Chart;

 map을 사용해서 every single data => in to the Chartbar로

나중에 dataPoint를 정의할 때 모든 dataPoint에는 value 값이 있다. 따라서 해당 data요소는 value 값이 있는 개체이다.

 

key값은 id가 있는 경우는 위의 방식과 같이 써도 되지만 없다면 index로 줘도 됨.