ES6 Прикрепление URL к сопоставленному объекту из массива - PullRequest
Новая
       13

ES6 Прикрепление URL к сопоставленному объекту из массива

0 голосов
/ 21 ноября 2018

Я работаю над сторонним проектом с React и использую API tmdb.

Мой запрос GET 

performSearch = () => { // Requesting data from API
    axios.get(`${URL}api_key=${API_KEY}&language=en-US&query=${this.state.searchInput}${PARAMS}`)
        .then((res) => {
            console.log(res.data.results);
            this.setState({ searchResults: res.data.results});
        });
}

И я отображаю результаты с помощью функции map, например

 const Suggestions = (props) => {
  const options = props.searchResults.map(r => (
    <li className='search-results'
      key={r.id} >
      {r.title}
      {r.name}
      {r.poster_path}
    </li>
  ))
  return <ul>{options}</ul>
}

export default Suggestions
* * * * * * * *

Мне нужен этот URL 'https://image.tmdb.org/t/p/w300' + {r.poster_path} для рендеринга изображения, как мне это сделать?Конечный результат выглядит так: https://image.tmdb.org/t/p/w300/gwPSoYUHAKmdyVywgLpKKA4BjRr.jpg'

1 Ответ

0 голосов
/ 21 ноября 2018

Вы можете передать его как атрибут в img-объект.Например, используя строки шаблона: 

 const Suggestions = (props) => {
   const options = props.searchResults.map((r) => (
     <li className='search-results' key={r.id}>
       {r.title}
       {r.name}
       <img src={`https://image.tmdb.org/t/p/w300/${r.poster_path}`} alt={r.title} />
     </li>
   ))
   return <ul>{options}</ul>
 };

 export default Suggestions
...