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?