JSXでObject.keysで繰り返し処理するも描画されないe

Question

JSX内で、JSONオブジェクトを繰り返し処理したいです。
以下のコードで実行するも、コンポーネントが呼ばれないです。
繰り返し処理ができるのに呼ばれないということは、
Object.keys.data.forEachの繰り返し処理の中のreturnではrenderメソッドに正常に届かないということでしょうか・・

// 呼び出し元のコンポーネント、ここから
import Sample from './Sample'
....
render() {
    const data = JSON.parse(this.props.sample.data)
    const array = [0, 2, 3, 4, 5, 6, 8, 9, 10]
    return (<div>
      <h2>ヘッダー</h2>
      {Object.keys(data).forEach((index) => {
        console.log(index) // consoleは表示されている
        return <Sample data={data} /> //FIXME:呼ばれない
      })}
      {array.map((index) => {
        return <Sample data={index} /> // 呼ばれている
      })}
    </div>
  )
}

Answer 1

.forEach()を使ってるからでしょう。
.forEach()は単純にループさせるだけで、結果を返しません。
ですので、.forEach()ではなく.map()に変更すればできるかと思います。