【React】配列の表示

mapとforEachの使いわけ

map：配列の要素に関数で指定した何かしらの処理を加えて新たな配列を生成。コードがシンプルでわかりやすい。

console.log( [2,4,6].map( x => x * 2 )) // [4,8,12]

forEach：map同様に配列の要素一つ一つに関数で指定した何らかの処理をしてくれるが、配列は生成されない。実装時間はmapと比べて早い。

console.log( [1,2,3].forEach( x => x * 2 )) // undefined

mapを使って新しい要素を作成

コード全文

//ES6 const, let
//ES6 Destructuring 
const { Component } = React;

function App() {
	
	const fruits = ["りんご", "ばなな", "みかん", "ぱんだ", "もも", "ぶどう"];
	// forEachで改行
														  
	return (
		<div>
			<p>配列をそのまま表示</p>
			<h2>{fruits}</h2>
			<br></br>
			<p>mapで新しい要素を作成</p>
			{
				fruits.map((list, index) => (
						<h1>{index}：{list}</h1>
					)
				)
		
			}
		
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector(".container"));

forEachを使って改行

コード全文

const { Component } = React;

function App() {
	
	const members = ["りんご", "ばなな", "みかん", "ぱんだ", "もも", "ぶどう"];
	// forEachで改行
	const list = [];
	members.forEach(member => list.push(member)+list.push(<br></br>));
														  
	return (
		<div>
			<p>配列をそのまま表示</p>
			<h2>{members}</h2>
			<br></br>
			<p>配列をforEachで改行</p>
			<h1>{list}</h1>
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector(".container"));