Solution 1 :

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

Problem :

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 (
        { words && 
            Object.entries(words.First.wordsdata).forEach(([key, value]) => {
              return(<div>{key} - {value}</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() {
    const { words, auth } = this.props;
    if (!auth.uid) return <Redirect to="/" />;
    return (
        <WordList words={words} />

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


Comment posted by Nicholas Tower


Comment posted by Rilla