Ternary operator chaining function problem

Viewed 10

I am working on themoviedb api. Api does not give genres as names, but with numbers that it has previously defined. For example 16,28,1012 etc. I want it to appear on the page if 16 is science fiction, if it is 28 romantically, and I wrote a function for this, but it only takes the first value, for the rest it is shown as the value of the first value. My function here;

   <div className="genre">
            {movie.genre_ids.map((genre_id) => (
              <p>
                <FaDotCircle className="dot" />
                {genre_id = "28"
                  ? "Action"
                  : genre_id = "12"
                  ? "Adventure"
                  : genre_id = "16"
                  ? "Animation "
                  : genre_id = "35"
                  ? "Comedy"
                  : genre_id = "80"
                  ? "Crime"
                  : genre_id = "99"
                  ? "Documentary"
                  : genre_id = "18"
                  ? "Drama"
                  : genre_id = "10751"
                  ? "Family"
                  : genre_id = "14"
                  ? "Fantasy"
                  : genre_id = "36"
                  ? "History"
                  : ""}
              </p>
            ))}
          </div>

And this is result;

with function

And this is without function(only mapping) result

without function

1 Answers

I found solution

   <div className="genre">
            {movie.genre_ids?.map((genre_id) => (
              <p>
                {genre_id === 28
                  ? "Action"
                  : genre_id === 12
                  ? "Adventure"
                  : genre_id === 16
                  ? "Animation "
                  : genre_id === 35
                  ? "Comedy"
                  : genre_id === 80
                  ? "Crime"
                  : genre_id === 99
                  ? "Documentary"
                  : genre_id === 18
                  ? "Drama"
                  : genre_id === 10751
                  ? "Family"
                  : genre_id === 14
                  ? "Fantasy"
                  : genre_id === 36
                  ? "History"
                  : ""}
              </p>
            ))}
          </div>
Related