React/JSX concatenation question

React/JSX concatenation question


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

componentDidMount() {
    .then(res => {
      const posts = => ({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 ( with post.poster_path and display it.

This doesn’t work:

<img src={} alt=“Movie Poster”/>

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


Have you tried

<img src={"" + post.poster_path} alt="Movie Poster" />


Just tried it. Doesn’t work.


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.


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 and object.prop


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, obj.poster_path is assigned as the poster property. Maybe you meant post.poster?


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.