React forEach function not rendering HTML-CodePudding

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>
    )
}

CodePudding user response：

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>
    );
  });
}

CodePudding user response：

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