Thank you for the answers, indeed changing .forEach to .map did the trick.

As the title says, I can not figure out why the return of a function doesn’t show on screen.
The object words.First.wordsdata is holding key-value pairs

import React from "react";

const WordList = ({ words }) => {
    return (
    <div>
        { words && 
            Object.entries(words.First.wordsdata).forEach(([key, value]) => {
              return(<div>{key} - {value}</div>);
            })
        }
    </div>
  );
};

export default WordList;

If I change the return to log it out, then
this one does show everything correctly in dev tools

return(console.log(key, value));

To give a full view, this is the file that calls the component

class Words extends Component {
  render() {
    //console.log(this.props)
    const { words, auth } = this.props;
    if (!auth.uid) return <Redirect to="/" />;
    return (
      <div>
        <WordList words={words} />
      </div>
    );
  }
}

I tried changing the return to simple HTML and It still doesn’t show anything