React.jsでmapの代わりにforEachは使えないのか

reactを学習しています。
配列をmapで回してリストを作ることができたのですが、
以下のコードのmapの箇所をforEachに書き換えると表示することができませんでした。

ReactではforEachではなくmapを使わないといけないのでしょうか？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
    <h1>React</h1>
    <div id="root">wait...</div>

    <script type="text/babel">
        let dom = document.querySelector('#root');


        const table = {
            fontSize: "16pt",
            padding: "5px 50px",
        }
        const th = {
            color:'white',
            backgroundColor:'#006',
            padding:'5px 15px',
        }
        const td = {
            color:'black',
            padding:'5px 15px',
            border:'1px solid gray',
        }


        let data = [
            {name:'Taro', mail:'taro@yamada', age:45},
            {name:'Hanako', mail:'hanako@flower', age:37},
            {name:'Sachiko', mail:'sachiko@happy', age:29}
        ];


        let el = (
            <div>
                <table style={table}>
                <tr>
                    <th style={th}>name</th>
                    <th style={th}>mail</th>
                    <th style={th}>age</th>
                </tr>
                {data.map((value) =>(
                <tr>
                    <td style={td}>{value.name}</td>
                    <td style={td}>{value.mail}</td>
                    <td style={td}>{value.age}</td>
                </tr>
                ))}
                </table>
            </div>
        );


        ReactDOM.render(el, dom);
    </script>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

ReactではforEachではなくmapを使わないといけないのでしょうか？

そんなことはないです。
mapの戻り値が配列なので質問文中の記法で成立しているだけなので、forEachで置き換えたかったら下記のようにすれば動作するかと思います。

javascript
1{(() => {
2  let elements = [];
3  data.forEach((value) => {
4    elements.push(
5      <tr>
6        <td style={td}>{value.name}</td>
7        <td style={td}>{value.mail}</td>
8        <td style={td}>{value.age}</td>
9      </tr>
10    );
11  });
12  return elements;
13})()}