reuse react component in a map function
I have doubt I'm doing it right when returning a component in a map iteration. How can I improve the code or is there any better way to do it? (although my code is working)
https://codesandbox.io/s/5yzqy6vyqx
Parent
function App() {
return (
<div className="App">
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => {
return <List name={name} count={count} />;
})}
</div>
);
}
List component
const List = ({ name, count }) => {
return (
<li>
{name}: {count}
</li>
);
};
javascript reactjs ecmascript-6
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
add a comment |
I have doubt I'm doing it right when returning a component in a map iteration. How can I improve the code or is there any better way to do it? (although my code is working)
https://codesandbox.io/s/5yzqy6vyqx
Parent
function App() {
return (
<div className="App">
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => {
return <List name={name} count={count} />;
})}
</div>
);
}
List component
const List = ({ name, count }) => {
return (
<li>
{name}: {count}
</li>
);
};
javascript reactjs ecmascript-6
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
I think this answer is better placed at codereview.stackexchange.com
– Martin Meeser
Nov 21 '18 at 14:20
add a comment |
I have doubt I'm doing it right when returning a component in a map iteration. How can I improve the code or is there any better way to do it? (although my code is working)
https://codesandbox.io/s/5yzqy6vyqx
Parent
function App() {
return (
<div className="App">
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => {
return <List name={name} count={count} />;
})}
</div>
);
}
List component
const List = ({ name, count }) => {
return (
<li>
{name}: {count}
</li>
);
};
javascript reactjs ecmascript-6
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
I have doubt I'm doing it right when returning a component in a map iteration. How can I improve the code or is there any better way to do it? (although my code is working)
https://codesandbox.io/s/5yzqy6vyqx
Parent
function App() {
return (
<div className="App">
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => {
return <List name={name} count={count} />;
})}
</div>
);
}
List component
const List = ({ name, count }) => {
return (
<li>
{name}: {count}
</li>
);
};
javascript reactjs ecmascript-6
javascript reactjs ecmascript-6
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
asked Nov 21 '18 at 14:04
Peethi AvonasPeethi Avonas
245
245
I think this answer is better placed at codereview.stackexchange.com
– Martin Meeser
Nov 21 '18 at 14:20
add a comment |
I think this answer is better placed at codereview.stackexchange.com
– Martin Meeser
Nov 21 '18 at 14:20
I think this answer is better placed at codereview.stackexchange.com
– Martin Meeser
Nov 21 '18 at 14:20
I think this answer is better placed at codereview.stackexchange.com
– Martin Meeser
Nov 21 '18 at 14:20
add a comment |
2 Answers
2
active
oldest
votes
Simplify like this.
function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
add a comment |
You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.
Index is not recommended as key but in worst case we can.
Also add ul element so that li will be rendered under ul
Below code has improved with adding key, ul and .map function without return
function App() {
return (
<div className="App">
<ul>
{[
{
id: 1
name: "banana",
count: 3
},
{
id:2,
name: "apple",
count: 5
}
].map(({ id, name, count }) => (
<List key={id} name={name} count={count} />;
))}
</ul>
</div>
);
}
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
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%2f53413836%2freuse-react-component-in-a-map-function%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
Simplify like this.
function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
add a comment |
Simplify like this.
function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
add a comment |
Simplify like this.
function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
Simplify like this.
function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}function App() {
return (
<div className="App">
<ul>
{[
{
name: "banana",
count: 3
},
{
name: "apple",
count: 5
}
].map(({ name, count }) => <li>{name}:{count} </li>)}
</ul>
</div>
);
}answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
answered Nov 21 '18 at 14:10
VIJAYABAL DHANAPALVIJAYABAL DHANAPAL
531113
531113
add a comment |
add a comment |
You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.
Index is not recommended as key but in worst case we can.
Also add ul element so that li will be rendered under ul
Below code has improved with adding key, ul and .map function without return
function App() {
return (
<div className="App">
<ul>
{[
{
id: 1
name: "banana",
count: 3
},
{
id:2,
name: "apple",
count: 5
}
].map(({ id, name, count }) => (
<List key={id} name={name} count={count} />;
))}
</ul>
</div>
);
}
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
add a comment |
You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.
Index is not recommended as key but in worst case we can.
Also add ul element so that li will be rendered under ul
Below code has improved with adding key, ul and .map function without return
function App() {
return (
<div className="App">
<ul>
{[
{
id: 1
name: "banana",
count: 3
},
{
id:2,
name: "apple",
count: 5
}
].map(({ id, name, count }) => (
<List key={id} name={name} count={count} />;
))}
</ul>
</div>
);
}
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
add a comment |
You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.
Index is not recommended as key but in worst case we can.
Also add ul element so that li will be rendered under ul
Below code has improved with adding key, ul and .map function without return
function App() {
return (
<div className="App">
<ul>
{[
{
id: 1
name: "banana",
count: 3
},
{
id:2,
name: "apple",
count: 5
}
].map(({ id, name, count }) => (
<List key={id} name={name} count={count} />;
))}
</ul>
</div>
);
}
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
You need to set unique value as key to List component because you are rendering List in loop. Unique value can be id per each object in array or index from .map but we are recommended to have unique id per object in data and use that as key when we iterate.
Index is not recommended as key but in worst case we can.
Also add ul element so that li will be rendered under ul
Below code has improved with adding key, ul and .map function without return
function App() {
return (
<div className="App">
<ul>
{[
{
id: 1
name: "banana",
count: 3
},
{
id:2,
name: "apple",
count: 5
}
].map(({ id, name, count }) => (
<List key={id} name={name} count={count} />;
))}
</ul>
</div>
);
}
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
answered Nov 21 '18 at 14:21
Hemadri DasariHemadri Dasari
10.2k32152
10.2k32152
add a comment |
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.
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%2f53413836%2freuse-react-component-in-a-map-function%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
I think this answer is better placed at codereview.stackexchange.com
– Martin Meeser
Nov 21 '18 at 14:20