React--Div exists, but is empty & more problems
1
I'm using the code below to pull in a list of data from a JSON file in order to populate a webpage with News. However, with what I have, the div is empty when I inspect it, and I'm not sure why. When I attempt other solutions, I get errors or the same output.
const newsList = labNewsJson['news']
class News extends Component {
render() {
const news = newsList.map((newsItem) => {
<div>{newsItem}</div>
});
return (
<div className='container'>
<h1>Lab News</h1>
<div>{news}</div>
</div>
);
}
}
export default News;
json reactjs map-function
edited Nov 16 '18 at 19:39
Tholle
34k53760
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
add a comment |
1
I'm using the code below to pull in a list of data from a JSON file in order to populate a webpage with News. However, with what I have, the div is empty when I inspect it, and I'm not sure why. When I attempt other solutions, I get errors or the same output.
const newsList = labNewsJson['news']
class News extends Component {
render() {
const news = newsList.map((newsItem) => {
<div>{newsItem}</div>
});
return (
<div className='container'>
<h1>Lab News</h1>
<div>{news}</div>
</div>
);
}
}
export default News;
json reactjs map-function
edited Nov 16 '18 at 19:39
Tholle
34k53760
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
add a comment |
1
1
1
I'm using the code below to pull in a list of data from a JSON file in order to populate a webpage with News. However, with what I have, the div is empty when I inspect it, and I'm not sure why. When I attempt other solutions, I get errors or the same output.
const newsList = labNewsJson['news']
class News extends Component {
render() {
const news = newsList.map((newsItem) => {
<div>{newsItem}</div>
});
return (
<div className='container'>
<h1>Lab News</h1>
<div>{news}</div>
</div>
);
}
}
export default News;
json reactjs map-function
edited Nov 16 '18 at 19:39
Tholle
34k53760
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
I'm using the code below to pull in a list of data from a JSON file in order to populate a webpage with News. However, with what I have, the div is empty when I inspect it, and I'm not sure why. When I attempt other solutions, I get errors or the same output.
const newsList = labNewsJson['news']
class News extends Component {
render() {
const news = newsList.map((newsItem) => {
<div>{newsItem}</div>
});
return (
<div className='container'>
<h1>Lab News</h1>
<div>{news}</div>
</div>
);
}
}
export default News;
json reactjs map-function
json reactjs map-function
edited Nov 16 '18 at 19:39
Tholle
34k53760
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
edited Nov 16 '18 at 19:39
Tholle
34k53760
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
edited Nov 16 '18 at 19:39
Tholle
34k53760
edited Nov 16 '18 at 19:39
Tholle
34k53760
edited Nov 16 '18 at 19:39
Tholle
34k53760
34k53760
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
asked Nov 16 '18 at 19:36
RgreanerRgreaner
106
106
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
2
You need to add a return to your map function.
const news = newsList.map((newsItem, index) => {
return <div key={index}>{newsItem.title}</div>
});
edited Nov 16 '18 at 19:55
Tholle
34k53760
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
Or remove the{}:const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing akeyon the div
– mpen
Nov 16 '18 at 19:39
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
|
show 1 more comment
0
When you are using {}, map function does not return anything. You have two options:
1- Try to use () instead of {}:
const news = newsList.map((newsItem) => (
<div>{newsItem}</div>
))
2- Return the item in every iteration:
const news = newsList.map((newsItem) => {
return <div>{newsItem}</div>
})
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
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
});
}
});
draft saved
draft discarded
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%2f53344290%2freact-div-exists-but-is-empty-more-problems%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You need to add a return to your map function.
const news = newsList.map((newsItem, index) => {
return <div key={index}>{newsItem.title}</div>
});
edited Nov 16 '18 at 19:55
Tholle
34k53760
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
Or remove the{}:const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing akeyon the div
– mpen
Nov 16 '18 at 19:39
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
|
show 1 more comment
2
You need to add a return to your map function.
const news = newsList.map((newsItem, index) => {
return <div key={index}>{newsItem.title}</div>
});
edited Nov 16 '18 at 19:55
Tholle
34k53760
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
Or remove the{}:const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing akeyon the div
– mpen
Nov 16 '18 at 19:39
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
|
show 1 more comment
2
2
2
You need to add a return to your map function.
const news = newsList.map((newsItem, index) => {
return <div key={index}>{newsItem.title}</div>
});
edited Nov 16 '18 at 19:55
Tholle
34k53760
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
You need to add a return to your map function.
const news = newsList.map((newsItem, index) => {
return <div key={index}>{newsItem.title}</div>
});
edited Nov 16 '18 at 19:55
Tholle
34k53760
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
edited Nov 16 '18 at 19:55
Tholle
34k53760
edited Nov 16 '18 at 19:55
Tholle
34k53760
edited Nov 16 '18 at 19:55
Tholle
34k53760
34k53760
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
answered Nov 16 '18 at 19:38
Keith BrewsterKeith Brewster
511115
511115
Or remove the{}:const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing akeyon the div
– mpen
Nov 16 '18 at 19:39
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
|
show 1 more comment
Or remove the{}:const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing akeyon the div
– mpen
Nov 16 '18 at 19:39
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
Or remove the
{} : const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing a key on the div– mpen
Nov 16 '18 at 19:39
Or remove the
{} : const news = newsList.map(newsItem => <div>{newsItem}</div>). But also he's missing a key on the div– mpen
Nov 16 '18 at 19:39
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
I did that and that's when I got errors. It returns, "Objects are not valid as a React child (found: object with keys {title, description}). If you meant to render a collection of children, use an array instead."
– Rgreaner
Nov 16 '18 at 19:43
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
Then newsItem is an object, and you should only be accessing specific properties, ex: return <div>{newsItem.title}</div>
– Keith Brewster
Nov 16 '18 at 19:46
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
I've updated the answer and included mpen's recommendation of using a key.
– Keith Brewster
Nov 16 '18 at 19:49
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
Thank you so much! That worked :D Could you explain what the <div key={index}> is doing?
– Rgreaner
Nov 16 '18 at 19:52
|
show 1 more comment
0
When you are using {}, map function does not return anything. You have two options:
1- Try to use () instead of {}:
const news = newsList.map((newsItem) => (
<div>{newsItem}</div>
))
2- Return the item in every iteration:
const news = newsList.map((newsItem) => {
return <div>{newsItem}</div>
})
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
add a comment |
0
When you are using {}, map function does not return anything. You have two options:
1- Try to use () instead of {}:
const news = newsList.map((newsItem) => (
<div>{newsItem}</div>
))
2- Return the item in every iteration:
const news = newsList.map((newsItem) => {
return <div>{newsItem}</div>
})
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
add a comment |
0
0
0
When you are using {}, map function does not return anything. You have two options:
1- Try to use () instead of {}:
const news = newsList.map((newsItem) => (
<div>{newsItem}</div>
))
2- Return the item in every iteration:
const news = newsList.map((newsItem) => {
return <div>{newsItem}</div>
})
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
When you are using {}, map function does not return anything. You have two options:
1- Try to use () instead of {}:
const news = newsList.map((newsItem) => (
<div>{newsItem}</div>
))
2- Return the item in every iteration:
const news = newsList.map((newsItem) => {
return <div>{newsItem}</div>
})
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
answered Nov 16 '18 at 19:47
Hadi RanjbarHadi Ranjbar
383313
383313
add a comment |
add a comment |
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53344290%2freact-div-exists-but-is-empty-more-problems%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
