ES6 Attaching a url to a mapped object from an array
I'm working on a side project with React and I'm using the tmdb API.
My GET request
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});
});
}
And I render the results with the map function like so
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
What I need is this URL 'https://image.tmdb.org/t/p/w300' + {r.poster_path} to render out the image, how do I go about doing that? End result looks like this 'https://image.tmdb.org/t/p/w300/gwPSoYUHAKmdyVywgLpKKA4BjRr.jpg'
javascript reactjs api ecmascript-6 get
asked Nov 21 at 3:32
invrt
386
add a comment |
I'm working on a side project with React and I'm using the tmdb API.
My GET request
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});
});
}
And I render the results with the map function like so
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
What I need is this URL 'https://image.tmdb.org/t/p/w300' + {r.poster_path} to render out the image, how do I go about doing that? End result looks like this 'https://image.tmdb.org/t/p/w300/gwPSoYUHAKmdyVywgLpKKA4BjRr.jpg'
javascript reactjs api ecmascript-6 get
asked Nov 21 at 3:32
invrt
386
Where should the image be? In the <li>?
– Art
Nov 21 at 3:37
Shouldn't you be passingURL + {r.poster_path}to an image tag's src attribute?
– Mortz
Nov 21 at 3:49
add a comment |
I'm working on a side project with React and I'm using the tmdb API.
My GET request
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});
});
}
And I render the results with the map function like so
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
What I need is this URL 'https://image.tmdb.org/t/p/w300' + {r.poster_path} to render out the image, how do I go about doing that? End result looks like this 'https://image.tmdb.org/t/p/w300/gwPSoYUHAKmdyVywgLpKKA4BjRr.jpg'
javascript reactjs api ecmascript-6 get
asked Nov 21 at 3:32
invrt
386
I'm working on a side project with React and I'm using the tmdb API.
My GET request
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});
});
}
And I render the results with the map function like so
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
What I need is this URL 'https://image.tmdb.org/t/p/w300' + {r.poster_path} to render out the image, how do I go about doing that? End result looks like this 'https://image.tmdb.org/t/p/w300/gwPSoYUHAKmdyVywgLpKKA4BjRr.jpg'
javascript reactjs api ecmascript-6 get
javascript reactjs api ecmascript-6 get
asked Nov 21 at 3:32
invrt
386
asked Nov 21 at 3:32
invrt
386
asked Nov 21 at 3:32
invrt
386
asked Nov 21 at 3:32
invrt
386
asked Nov 21 at 3:32
invrt
386
386
Where should the image be? In the <li>?
– Art
Nov 21 at 3:37
Shouldn't you be passingURL + {r.poster_path}to an image tag's src attribute?
– Mortz
Nov 21 at 3:49
add a comment |
Where should the image be? In the <li>?
– Art
Nov 21 at 3:37
Shouldn't you be passingURL + {r.poster_path}to an image tag's src attribute?
– Mortz
Nov 21 at 3:49
Where should the image be? In the <li>?
– Art
Nov 21 at 3:37
Where should the image be? In the <li>?
– Art
Nov 21 at 3:37
Shouldn't you be passing
URL + {r.poster_path} to an image tag's src attribute?– Mortz
Nov 21 at 3:49
Shouldn't you be passing
URL + {r.poster_path} to an image tag's src attribute?– Mortz
Nov 21 at 3:49
add a comment |
1 Answer
1
active
oldest
votes
You can pass it as an attribute into an img-object. For example, using template strings:
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
answered Nov 21 at 3:43
Art
47239
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404877%2fes6-attaching-a-url-to-a-mapped-object-from-an-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can pass it as an attribute into an img-object. For example, using template strings:
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
answered Nov 21 at 3:43
Art
47239
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
add a comment |
You can pass it as an attribute into an img-object. For example, using template strings:
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
answered Nov 21 at 3:43
Art
47239
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
add a comment |
You can pass it as an attribute into an img-object. For example, using template strings:
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
answered Nov 21 at 3:43
Art
47239
You can pass it as an attribute into an img-object. For example, using template strings:
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
answered Nov 21 at 3:43
Art
47239
answered Nov 21 at 3:43
Art
47239
answered Nov 21 at 3:43
Art
47239
answered Nov 21 at 3:43
Art
47239
47239
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
add a comment |
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
Damn, looks like i was pretty close, I just needed that $ Thanks bro
– invrt
Nov 21 at 3:52
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53404877%2fes6-attaching-a-url-to-a-mapped-object-from-an-array%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Where should the image be? In the <li>?
– Art
Nov 21 at 3:37
Shouldn't you be passing
URL + {r.poster_path}to an image tag's src attribute?– Mortz
Nov 21 at 3:49