React/JSX concatenation question

1

Working on a React project and I’m pulling JSON data from a movie database API. I’ve pulled the data like this:

componentDidMount() {
  axios.get(`https://api.themoviedb.org/3/movie/now_playing?api_key=03b9a40695aae1f4e99a42e90e012e9e&language=en-US&page=1`)
    .then(res => {
      const posts = res.data.results.map(obj => ({title: obj.title, overview: obj.overview, poster: obj.poster_path, vote: obj.vote_average}));
      this.setState({ posts });
    });
}

So I am able to access the titles with post.title, the overview of the movie with post.overview, etc.

I’m able to target the movie poster image with post.poster_path, but when I attempt to display it I run into problems with concatenation. I want to concatenate the root URL with each image. I want to concatenate the URL (https://image.tmdb.org/t/p/w300/) with post.poster_path and display it.

This doesn’t work:

<img src={https://image.tmdb.org/t/p/w300/+post.poster_path} alt=“Movie Poster”/>

What’s the proper way to concatenate a string with JSX?

2

Have you tried

<img src={"https://image.tmdb.org/t/p/w300/" + post.poster_path} alt="Movie Poster" />
3

Just tried it. Doesn’t work.

4

Are you sure that the result of concatenating the strings is a URL to an image? I made something similar in codepen and the image loads.

https://codepen.io/anon/pen/ooKWzJ?editors=1010

5

The thing is I’m not concatenating a string to a variable. I’m concatenating a string to a JSX element which is an object property. Pretty sure that’s the issue I’m running into.

Essentially I am trying to concatenate www.whatever.com/ and object.prop

6

My point is that you can plug in any JS expression between the braces.

Are you sure that post.poster_path has a string value? In your results.map, obj.poster_path is assigned as the poster property. Maybe you meant post.poster?

7

That did the trick. Thanks.

You were right. I was trying to access the image the same way I was accessing text elements in the other objects.