What is the problem with my code that makes it repeat 5 times
-5
My code seem to be repeating 5 times:
cannot find the reason:
import React, { Component } from "react";
class App extends Component {
state = { value: [{ title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render() {
return (
<div>{this.state.value ? this.state.value.map(valu =>
Object.keys(valu).map((tr, index) => (
<div key={index}>{valu.title}  {valu.category}  {valu.replies}  {valu.views}  {valu.activity}</div>))) : null}
</div>);
}
}
export default App;
javascript reactjs
edited Nov 24 '18 at 16:14
Yossi
1,6032720
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
|
show 5 more comments
-5
My code seem to be repeating 5 times:
cannot find the reason:
import React, { Component } from "react";
class App extends Component {
state = { value: [{ title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render() {
return (
<div>{this.state.value ? this.state.value.map(valu =>
Object.keys(valu).map((tr, index) => (
<div key={index}>{valu.title}  {valu.category}  {valu.replies}  {valu.views}  {valu.activity}</div>))) : null}
</div>);
}
}
export default App;
javascript reactjs
edited Nov 24 '18 at 16:14
Yossi
1,6032720
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
4
Hi Paul, welcome to SO. Your question needs some work. For a start, please format your code. Secondly, don't just dump your code; explain what's going wrong, and what you expect to happen. For more, see How to Ask a Good Question
– Utkanos
Nov 24 '18 at 14:19
3
Can you please format this? And be more specific with the problem?
– Dave Newton
Nov 24 '18 at 14:19
Are you calling your component 5 times ? or in a loop ...
– Cedric Dumont
Nov 24 '18 at 14:30
i did formated the code, can you please explaine to me why my code is bien repeating 5 time
– Paul Vlogs
Nov 24 '18 at 14:30
no, i want to loop over this to get 1 result not 5 repeating result
– Paul Vlogs
Nov 24 '18 at 14:31
|
show 5 more comments
-5
-5
-5
My code seem to be repeating 5 times:
cannot find the reason:
import React, { Component } from "react";
class App extends Component {
state = { value: [{ title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render() {
return (
<div>{this.state.value ? this.state.value.map(valu =>
Object.keys(valu).map((tr, index) => (
<div key={index}>{valu.title}  {valu.category}  {valu.replies}  {valu.views}  {valu.activity}</div>))) : null}
</div>);
}
}
export default App;
javascript reactjs
edited Nov 24 '18 at 16:14
Yossi
1,6032720
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
My code seem to be repeating 5 times:
cannot find the reason:
import React, { Component } from "react";
class App extends Component {
state = { value: [{ title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render() {
return (
<div>{this.state.value ? this.state.value.map(valu =>
Object.keys(valu).map((tr, index) => (
<div key={index}>{valu.title}  {valu.category}  {valu.replies}  {valu.views}  {valu.activity}</div>))) : null}
</div>);
}
}
export default App;
javascript reactjs
javascript reactjs
edited Nov 24 '18 at 16:14
Yossi
1,6032720
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
edited Nov 24 '18 at 16:14
Yossi
1,6032720
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
edited Nov 24 '18 at 16:14
Yossi
1,6032720
edited Nov 24 '18 at 16:14
Yossi
1,6032720
edited Nov 24 '18 at 16:14
Yossi
1,6032720
1,6032720
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
asked Nov 24 '18 at 14:18
Paul VlogsPaul Vlogs
33
33
4
Hi Paul, welcome to SO. Your question needs some work. For a start, please format your code. Secondly, don't just dump your code; explain what's going wrong, and what you expect to happen. For more, see How to Ask a Good Question
– Utkanos
Nov 24 '18 at 14:19
3
Can you please format this? And be more specific with the problem?
– Dave Newton
Nov 24 '18 at 14:19
Are you calling your component 5 times ? or in a loop ...
– Cedric Dumont
Nov 24 '18 at 14:30
i did formated the code, can you please explaine to me why my code is bien repeating 5 time
– Paul Vlogs
Nov 24 '18 at 14:30
no, i want to loop over this to get 1 result not 5 repeating result
– Paul Vlogs
Nov 24 '18 at 14:31
|
show 5 more comments
4
Hi Paul, welcome to SO. Your question needs some work. For a start, please format your code. Secondly, don't just dump your code; explain what's going wrong, and what you expect to happen. For more, see How to Ask a Good Question
– Utkanos
Nov 24 '18 at 14:19
3
Can you please format this? And be more specific with the problem?
– Dave Newton
Nov 24 '18 at 14:19
Are you calling your component 5 times ? or in a loop ...
– Cedric Dumont
Nov 24 '18 at 14:30
i did formated the code, can you please explaine to me why my code is bien repeating 5 time
– Paul Vlogs
Nov 24 '18 at 14:30
no, i want to loop over this to get 1 result not 5 repeating result
– Paul Vlogs
Nov 24 '18 at 14:31
4
4
Hi Paul, welcome to SO. Your question needs some work. For a start, please format your code. Secondly, don't just dump your code; explain what's going wrong, and what you expect to happen. For more, see How to Ask a Good Question
– Utkanos
Nov 24 '18 at 14:19
Hi Paul, welcome to SO. Your question needs some work. For a start, please format your code. Secondly, don't just dump your code; explain what's going wrong, and what you expect to happen. For more, see How to Ask a Good Question
– Utkanos
Nov 24 '18 at 14:19
3
3
Can you please format this? And be more specific with the problem?
– Dave Newton
Nov 24 '18 at 14:19
Can you please format this? And be more specific with the problem?
– Dave Newton
Nov 24 '18 at 14:19
Are you calling your component 5 times ? or in a loop ...
– Cedric Dumont
Nov 24 '18 at 14:30
Are you calling your component 5 times ? or in a loop ...
– Cedric Dumont
Nov 24 '18 at 14:30
i did formated the code, can you please explaine to me why my code is bien repeating 5 time
– Paul Vlogs
Nov 24 '18 at 14:30
i did formated the code, can you please explaine to me why my code is bien repeating 5 time
– Paul Vlogs
Nov 24 '18 at 14:30
no, i want to loop over this to get 1 result not 5 repeating result
– Paul Vlogs
Nov 24 '18 at 14:31
no, i want to loop over this to get 1 result not 5 repeating result
– Paul Vlogs
Nov 24 '18 at 14:31
|
show 5 more comments
1 Answer
1
active
oldest
votes
0
Remove obj(keys) (it creates an unnecessary additional loop) and instead just simply map over this.state.value. Then use a unique property for the key (ideally this should be an id that was assigned by your database).
import React, { Component } from "react";
class App extends Component {
state = { value: [{ id: "b5dc-58f6-u3ga-fbb4", title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render = () => (
this.state.value && this.state.value.length > 0 // if value exists and is greater than 0...
? this.state.value.map(({ id, title, category, replies, views, activity }) => ( // map over value array and deconstruct the properties (eliminates the need to do value.title, value.category...etc)
<div key={id}>
{title}  {category}  {replies}  {views}  {activity}
</div>
))
: null // otherwise, show null if this.state.value is empty
)
}
export default App;
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
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%2f53459073%2fwhat-is-the-problem-with-my-code-that-makes-it-repeat-5-times%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
0
Remove obj(keys) (it creates an unnecessary additional loop) and instead just simply map over this.state.value. Then use a unique property for the key (ideally this should be an id that was assigned by your database).
import React, { Component } from "react";
class App extends Component {
state = { value: [{ id: "b5dc-58f6-u3ga-fbb4", title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render = () => (
this.state.value && this.state.value.length > 0 // if value exists and is greater than 0...
? this.state.value.map(({ id, title, category, replies, views, activity }) => ( // map over value array and deconstruct the properties (eliminates the need to do value.title, value.category...etc)
<div key={id}>
{title}  {category}  {replies}  {views}  {activity}
</div>
))
: null // otherwise, show null if this.state.value is empty
)
}
export default App;
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
add a comment |
0
Remove obj(keys) (it creates an unnecessary additional loop) and instead just simply map over this.state.value. Then use a unique property for the key (ideally this should be an id that was assigned by your database).
import React, { Component } from "react";
class App extends Component {
state = { value: [{ id: "b5dc-58f6-u3ga-fbb4", title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render = () => (
this.state.value && this.state.value.length > 0 // if value exists and is greater than 0...
? this.state.value.map(({ id, title, category, replies, views, activity }) => ( // map over value array and deconstruct the properties (eliminates the need to do value.title, value.category...etc)
<div key={id}>
{title}  {category}  {replies}  {views}  {activity}
</div>
))
: null // otherwise, show null if this.state.value is empty
)
}
export default App;
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
add a comment |
0
0
0
Remove obj(keys) (it creates an unnecessary additional loop) and instead just simply map over this.state.value. Then use a unique property for the key (ideally this should be an id that was assigned by your database).
import React, { Component } from "react";
class App extends Component {
state = { value: [{ id: "b5dc-58f6-u3ga-fbb4", title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render = () => (
this.state.value && this.state.value.length > 0 // if value exists and is greater than 0...
? this.state.value.map(({ id, title, category, replies, views, activity }) => ( // map over value array and deconstruct the properties (eliminates the need to do value.title, value.category...etc)
<div key={id}>
{title}  {category}  {replies}  {views}  {activity}
</div>
))
: null // otherwise, show null if this.state.value is empty
)
}
export default App;
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
Remove obj(keys) (it creates an unnecessary additional loop) and instead just simply map over this.state.value. Then use a unique property for the key (ideally this should be an id that was assigned by your database).
import React, { Component } from "react";
class App extends Component {
state = { value: [{ id: "b5dc-58f6-u3ga-fbb4", title: "my title", category: "action", replies: "62", views: "26k", activity: "18h" }] };
render = () => (
this.state.value && this.state.value.length > 0 // if value exists and is greater than 0...
? this.state.value.map(({ id, title, category, replies, views, activity }) => ( // map over value array and deconstruct the properties (eliminates the need to do value.title, value.category...etc)
<div key={id}>
{title}  {category}  {replies}  {views}  {activity}
</div>
))
: null // otherwise, show null if this.state.value is empty
)
}
export default App;
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
edited Nov 24 '18 at 16:21
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
answered Nov 24 '18 at 15:53
matt carlottamatt carlotta
2,04759
2,04759
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%2f53459073%2fwhat-is-the-problem-with-my-code-that-makes-it-repeat-5-times%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
4
Hi Paul, welcome to SO. Your question needs some work. For a start, please format your code. Secondly, don't just dump your code; explain what's going wrong, and what you expect to happen. For more, see How to Ask a Good Question
– Utkanos
Nov 24 '18 at 14:19
3
Can you please format this? And be more specific with the problem?
– Dave Newton
Nov 24 '18 at 14:19
Are you calling your component 5 times ? or in a loop ...
– Cedric Dumont
Nov 24 '18 at 14:30
i did formated the code, can you please explaine to me why my code is bien repeating 5 time
– Paul Vlogs
Nov 24 '18 at 14:30
no, i want to loop over this to get 1 result not 5 repeating result
– Paul Vlogs
Nov 24 '18 at 14:31