map 활용 어레이 출력하기

문제 #1

const input_data = ['Apple','Banana', 'Watermelon', 'temp', 'temp2'];
<PrintItem data={input_data} />

PrintItem 컴포넌트 내부에서 p 태그로 모든 data 출력

해결 #1

function PrintItem(props) {
	const { data } = props;

	return (
			<div>
				{data.map((element,idx) => <p key={idx}>{element}</p>)}
			</div>
	)
}

문제 #2

const input_data = [
		{
			name: "홍길동",
			age: 12,
		},
		{
			name: "철수",
			age: 10,
		}
];
<PrintItem data={input_data} />

PrintItem 컴포넌트 내부에서 이름은 h1, 나이는 h2로 모든 요소 출력.

function PrintItem(props) {
	const { data } = props;

	return (
	  <div>
	    {data.map((element,idx) => {
		      return (
		        <div key={idx}>
						  <h1>{element.name}</h1>
						  <h2>{element.age}</h2>    
		        </div>
		      )
				}
		  )}
		</div>
  )
}