Loop over object properties to create buttons in visualization

[Elaak (Hans)]

I am creating a react visualization plugin that lists a couple of buttons. In my react component I have access to a configurable object with X properties. I want to loop over those properties and create a button for each entry, but somehow I can't seem to get it working.

This is my render function:

render() {
  return (
    <EuiPage>
      <EuiPageBody>
        <EuiPageContent>
          <h3>List of buttons</h3>
          {Object.keys(this.listData).forEach(function (key) {
            return <button className="myBtn" onClick={() => this.processElement(key)}>{key}</button>
          })}
        </EuiPageContent>
      </EuiPageBody>
    </EuiPage>
  )
}

I have checked that key has the right values, but in Kibana I never see any buttons appearing, nor any error. What am I missing?

[flash1293 (Joe Reuter)]

forEach does nothing with the return value of the iterator function, you need to use map. It's basically the same with the difference that it uses the return values to build a new array which is subsequently passed to react. Otherwise your render function looks fine.