How to separate the array items in my list of actors?

Question

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!

Answer 1

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.