I am trying to separate the displayed list of actors (which will also act as a link to the actors bio page) that each movie will have in my "netflix-like" app with a comma followed by a space between each actor. What I currently have now tells me that the ".join()" method in not a function. How can I fix this?
{movie.Actors.map(actor => <Link to={`/actors/${actor.Name}`} className="value">{actor.Name.join(", ")}</Link>)}
Thanks!
You can join jsx with comma like this:
{movie.Actors.map((actor) => (
<Link key={actor.Name} to={`/actors/${actor.Name}`} className="value">
{actor.Name}
</Link>
)).reduce((prev, curr) => [prev, ", ", curr])}
You can take a look at this sandbox for live working example.