How do I make it so that a list of "actors" act as separate links in ReactJS-CodePudding

I am working on a netflix style app for a practice project. Much like netflix, when I click on a movie, the info about the movie comes up, including a list of actors who are in that movie. I would like to have it so that when you click on a particular actors name, it takes you to a new page with that actors bio, movies, info, etc. However, my code currently has it so that all the actors appear as a single link. How do I separate them into separate links?

<div className="movie-actors">
      <span className="label">Actors: </span>
      <Link to={`/actors/${movie.Actors.map(actor => actor.Name)}`} className="value">{movie.Actors.map(actor => actor.Name).join(", ")}</Link>
    </div>
    <button onClick={() => { onBackClick(null) }}>Back</button>

  </div>

Let me know if you need me to provide any more info, thanks!

CodePudding user response：

You are putting the map inside your component. Just a simple mistake

change this

<Link to={`/actors/${movie.Actors.map(actor => actor.Name)}`} className="value">{movie.Actors.map(actor => actor.Name).join(", ")}</Link>

to:

{movie.Actors.map(actor => <Link to={`/actors/${actor}`} className="value">{actor.join(", ")}</Link>)}