React forEach function not rendering HTML

Question

I have a React component with a function that renders a list of music credits. titles is an object of strings and props.current.credits is an object of arrays (they're drawn from a much larger JSON, so changing the data structures is not an option).

const titles = {
    featuring: "Featuring",
    recorded: "Recorded at",
    samples: "Samples",
    ...etc
}

props.current.credits = {
    "writers": ["John Doe", "Sally Singer"],
    "recorded": [{
        "studio": "ABC Studios",
        "city": "Houston, Texas"
    }],
    ...etc
}

The function only renders the h2 tags, but not the p tags within the forEach code blocks. When I test the forEach blocks by logging name to the console, the values appear, so I'm completely stuck as to what the problem could be. Some insight on this would be appreciated.

const Credit = props => {
    const credit = type => {
        if (props.current.credits.hasOwnProperty(type)) {
            if (type === "recorded") {
                return (
                    <div className="credit">
                        <h2>{titles[type]}</h2>
                        {
                            props.current.credits[type].forEach(name => {
                                return (
                                    <p className="location">
                                        <span className="studio">{name.studio}</span>
                                        <span className="city">{name.city}</span>
                                    </p>
                                )
                            })
                        }
                    </div>
                )
            }

            if (type === "samples" || type === "interpolates") {
                return (
                    <div className="credit">
                        <h2>{titles[type]}</h2>
                        {
                            props.current.credits[type].forEach(name => {
                                return (
                                    <p className="location">
                                        <span className="studio">{name.title}</span>
                                        <span className="city">{{ __html: name.info }}</span>
                                    </p>
                                )
                            })
                        }
                    </div>
                )
            }

            return (
                <div className="credit">
                    <h2>{titles[type]}</h2>
                    {
                        props.current.credits[type].forEach(name => {
                            return (
                                <p>{name}</p>
                            )
                        })
                    }
                </div>
            )
        }
        return null;
    }
    
    return (
        <div>
            {credit("samples")}
        </div>
    )
}

use map method instead of forEach – Hazrat Gafulov Jun 19 '22 at 17:08 — Hazrat Gafulov, Jun 19 '22 at 17:08

score 1 · Answer 1 · answered Jun 19 '22 at 17:13

1

forEach method does not return anything. It returns undefined. Use map instead. map method always returns an array at the end.

answered Jun 19 '22 at 17:13

Nayeem M. Muzahid

141
6

score 1 · Accepted Answer · answered Jun 19 '22 at 17:17

1

According to the official docs, you should use map.

So an example would be:

{
  props.current.credits[type].map((name) => {
    return (
      <p className="location">
        <span className="studio">{name.studio}</span>
        <span className="city">{name.city}</span>
      </p>
    );
  });
}

answered Jun 19 '22 at 17:17

Son Nguyen

1,472
8
16

Lol ... one of those times you spend so long trying to solve a problem and the solution is so simple. Thanks for the refresher! – Davy Kamanzi Jun 19 '22 at 17:22

React forEach function not rendering HTML

2 Answers2