Render inside foreach

Изучаю JS + RN и пишу приложение с навигацией. Хочу отрендерить компонент в зависимости от переданных в него пропсов. Немогу понять в чем моя ошибка, компонент не возвращается, хотя метод return отрабатывает точно, судя по логам. В данном примере я пытаюсь отрендерить 2 элементе кнопок для таб бара статично одинаковых, затем я изменю их св-ва в зависимости от данных в объектах массив myTabs.

const myTabs = [
{icon: "home", name: "Передача показаний", key: "WorkScreen", active: "active"},
{icon: "person", name: "Профиль", key: "Profile"},
]
render() {
    return (
    <View>
      <Text>
      Work screen
      </Text>
      <Footer>
        <FooterTab>
          <FooterButton tabs = {myTabs}></FooterButton>
        </FooterTab>
      </Footer>
    </View>
    );
}

И дочерний компонент, который собственно неработает корректно

export class FooterButton extends React.Component {
constructor(props) {
super(props)
props.tabs.forEach(function(element) {
  console.log(element.name);
});
}
render() {
return (
  <FooterTab>
    {this.props.tabs.forEach(function(element) {
      console.log("testIter=", element.name)
      return (<Button vertical>
        <Icon name="home"></Icon>
        <Text>{console.log("testIterInsideReturn=", element.name)}</Text>
        </Button>)
    })}
  </FooterTab>
)
}
}

В логах есть и testIter и testIterInsideReturn с соответствующими значениями полей объекта element.