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!

join is a method found on arrays. actor.Name is a string I presume. — Dan Zuzevich, Oct 25 '21 at 17:04
Yeah it is, I originally had this: actor.Name)}`} className="value">{movie.Actors.map(actor => actor.Name).join(", ")} but it returned all the actors as one link instead of three separate ones. I updated the code to the posting above but it somehow becomes a string somewhere along the line. — Jop, Oct 25 '21 at 17:15

score 1 · Accepted Answer · answered Oct 25 '21 at 17:22

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.

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

1 Answers1