How to prevent duplicate props inside render
In my reactjs App, Slider details are showing from API call. Those are coming from reducer as props. The problem is, I'm getting props multiple times. As a result, my slider display duplicate images and data.is there any solution?.Also i tried shouldComponentUpdate as well
shouldComponentUpdate(nextProps, nextState){
if (nextProps.slider !== this.props.slider) {
return false;
}
return true;
}
renderSlides(sliderData) {
console.log("Slider",sliderData);
return sliderData.data.map(data => {
return (
<div key={data.embed_code} className="sliderItem">
<div>
<img className="img-fluid" src={data.image_url} alt={'img'}
<label className="label-free">{data.name}</lable>
</div>
</div>
);
});
}
render() {
const { slider } = this.props;
return (
<div className="cat-item">
{this.renderSlides(slider)}
</div>);
}
my console log as below
javascript reactjs react-redux
edited Nov 16 at 6:27
jerry
537
asked Nov 16 at 5:10
Tje123
121214
add a comment |
In my reactjs App, Slider details are showing from API call. Those are coming from reducer as props. The problem is, I'm getting props multiple times. As a result, my slider display duplicate images and data.is there any solution?.Also i tried shouldComponentUpdate as well
shouldComponentUpdate(nextProps, nextState){
if (nextProps.slider !== this.props.slider) {
return false;
}
return true;
}
renderSlides(sliderData) {
console.log("Slider",sliderData);
return sliderData.data.map(data => {
return (
<div key={data.embed_code} className="sliderItem">
<div>
<img className="img-fluid" src={data.image_url} alt={'img'}
<label className="label-free">{data.name}</lable>
</div>
</div>
);
});
}
render() {
const { slider } = this.props;
return (
<div className="cat-item">
{this.renderSlides(slider)}
</div>);
}
my console log as below
javascript reactjs react-redux
edited Nov 16 at 6:27
jerry
537
asked Nov 16 at 5:10
Tje123
121214
renderSlides shouln't be a problem and console showing 2 time because your render is calling 2 times, you need to inspect more and findout where the problem is.
– Just code
Nov 16 at 5:18
post the code for components calling this. they are probably updating state and thus causing rerender
– Daniel Lizik
Nov 16 at 5:19
As others have said, it's getting re-rendered, that's why it's printing the props twice. Find out why that is, could be because an ancestor is re-rendering, could be cos the store is changing, could be other reasons
– Jayce444
Nov 16 at 5:23
are you seeing double the amount of images? this shouldn't happen just because you received props twice? It will always only render once per update with what ever is in your array, if you are seeing duplicate images, then it's probably something to do with your reducer, please share the reducer code.
– Lloyd
Nov 16 at 5:28
add a comment |
In my reactjs App, Slider details are showing from API call. Those are coming from reducer as props. The problem is, I'm getting props multiple times. As a result, my slider display duplicate images and data.is there any solution?.Also i tried shouldComponentUpdate as well
shouldComponentUpdate(nextProps, nextState){
if (nextProps.slider !== this.props.slider) {
return false;
}
return true;
}
renderSlides(sliderData) {
console.log("Slider",sliderData);
return sliderData.data.map(data => {
return (
<div key={data.embed_code} className="sliderItem">
<div>
<img className="img-fluid" src={data.image_url} alt={'img'}
<label className="label-free">{data.name}</lable>
</div>
</div>
);
});
}
render() {
const { slider } = this.props;
return (
<div className="cat-item">
{this.renderSlides(slider)}
</div>);
}
my console log as below
javascript reactjs react-redux
edited Nov 16 at 6:27
jerry
537
asked Nov 16 at 5:10
Tje123
121214
In my reactjs App, Slider details are showing from API call. Those are coming from reducer as props. The problem is, I'm getting props multiple times. As a result, my slider display duplicate images and data.is there any solution?.Also i tried shouldComponentUpdate as well
shouldComponentUpdate(nextProps, nextState){
if (nextProps.slider !== this.props.slider) {
return false;
}
return true;
}
renderSlides(sliderData) {
console.log("Slider",sliderData);
return sliderData.data.map(data => {
return (
<div key={data.embed_code} className="sliderItem">
<div>
<img className="img-fluid" src={data.image_url} alt={'img'}
<label className="label-free">{data.name}</lable>
</div>
</div>
);
});
}
render() {
const { slider } = this.props;
return (
<div className="cat-item">
{this.renderSlides(slider)}
</div>);
}
my console log as below
javascript reactjs react-redux
javascript reactjs react-redux
edited Nov 16 at 6:27
jerry
537
asked Nov 16 at 5:10
Tje123
121214
edited Nov 16 at 6:27
jerry
537
asked Nov 16 at 5:10
Tje123
121214
edited Nov 16 at 6:27
jerry
537
edited Nov 16 at 6:27
jerry
537
edited Nov 16 at 6:27
jerry
537
537
asked Nov 16 at 5:10
Tje123
121214
asked Nov 16 at 5:10
Tje123
121214
asked Nov 16 at 5:10
Tje123
121214
121214
renderSlides shouln't be a problem and console showing 2 time because your render is calling 2 times, you need to inspect more and findout where the problem is.
– Just code
Nov 16 at 5:18
post the code for components calling this. they are probably updating state and thus causing rerender
– Daniel Lizik
Nov 16 at 5:19
As others have said, it's getting re-rendered, that's why it's printing the props twice. Find out why that is, could be because an ancestor is re-rendering, could be cos the store is changing, could be other reasons
– Jayce444
Nov 16 at 5:23
are you seeing double the amount of images? this shouldn't happen just because you received props twice? It will always only render once per update with what ever is in your array, if you are seeing duplicate images, then it's probably something to do with your reducer, please share the reducer code.
– Lloyd
Nov 16 at 5:28
add a comment |
renderSlides shouln't be a problem and console showing 2 time because your render is calling 2 times, you need to inspect more and findout where the problem is.
– Just code
Nov 16 at 5:18
post the code for components calling this. they are probably updating state and thus causing rerender
– Daniel Lizik
Nov 16 at 5:19
As others have said, it's getting re-rendered, that's why it's printing the props twice. Find out why that is, could be because an ancestor is re-rendering, could be cos the store is changing, could be other reasons
– Jayce444
Nov 16 at 5:23
are you seeing double the amount of images? this shouldn't happen just because you received props twice? It will always only render once per update with what ever is in your array, if you are seeing duplicate images, then it's probably something to do with your reducer, please share the reducer code.
– Lloyd
Nov 16 at 5:28
renderSlides shouln't be a problem and console showing 2 time because your render is calling 2 times, you need to inspect more and findout where the problem is.
– Just code
Nov 16 at 5:18
renderSlides shouln't be a problem and console showing 2 time because your render is calling 2 times, you need to inspect more and findout where the problem is.
– Just code
Nov 16 at 5:18
post the code for components calling this. they are probably updating state and thus causing rerender
– Daniel Lizik
Nov 16 at 5:19
post the code for components calling this. they are probably updating state and thus causing rerender
– Daniel Lizik
Nov 16 at 5:19
As others have said, it's getting re-rendered, that's why it's printing the props twice. Find out why that is, could be because an ancestor is re-rendering, could be cos the store is changing, could be other reasons
– Jayce444
Nov 16 at 5:23
As others have said, it's getting re-rendered, that's why it's printing the props twice. Find out why that is, could be because an ancestor is re-rendering, could be cos the store is changing, could be other reasons
– Jayce444
Nov 16 at 5:23
are you seeing double the amount of images? this shouldn't happen just because you received props twice? It will always only render once per update with what ever is in your array, if you are seeing duplicate images, then it's probably something to do with your reducer, please share the reducer code.
– Lloyd
Nov 16 at 5:28
are you seeing double the amount of images? this shouldn't happen just because you received props twice? It will always only render once per update with what ever is in your array, if you are seeing duplicate images, then it's probably something to do with your reducer, please share the reducer code.
– Lloyd
Nov 16 at 5:28
add a comment |
1 Answer
1
active
oldest
votes
shouldComponentUpdate(nextProps, nextState){
if (JSON.stringify(nextProps.slider) !== JSON.stringify(this.props.slider)) {
return false;
}
return true;
}
nextProps.slider !== this.props.slider this is always returns you false because the reference is getting change since it creates new array each time. so you can use stringyfy an then compare which will help you to stop update when array values are same.
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
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%2f53331792%2fhow-to-prevent-duplicate-props-inside-render%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
shouldComponentUpdate(nextProps, nextState){
if (JSON.stringify(nextProps.slider) !== JSON.stringify(this.props.slider)) {
return false;
}
return true;
}
nextProps.slider !== this.props.slider this is always returns you false because the reference is getting change since it creates new array each time. so you can use stringyfy an then compare which will help you to stop update when array values are same.
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
add a comment |
shouldComponentUpdate(nextProps, nextState){
if (JSON.stringify(nextProps.slider) !== JSON.stringify(this.props.slider)) {
return false;
}
return true;
}
nextProps.slider !== this.props.slider this is always returns you false because the reference is getting change since it creates new array each time. so you can use stringyfy an then compare which will help you to stop update when array values are same.
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
add a comment |
shouldComponentUpdate(nextProps, nextState){
if (JSON.stringify(nextProps.slider) !== JSON.stringify(this.props.slider)) {
return false;
}
return true;
}
nextProps.slider !== this.props.slider this is always returns you false because the reference is getting change since it creates new array each time. so you can use stringyfy an then compare which will help you to stop update when array values are same.
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
shouldComponentUpdate(nextProps, nextState){
if (JSON.stringify(nextProps.slider) !== JSON.stringify(this.props.slider)) {
return false;
}
return true;
}
nextProps.slider !== this.props.slider this is always returns you false because the reference is getting change since it creates new array each time. so you can use stringyfy an then compare which will help you to stop update when array values are same.
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
answered Nov 16 at 5:25
Roopak PutheVeettil
27939
27939
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.
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%2f53331792%2fhow-to-prevent-duplicate-props-inside-render%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
renderSlides shouln't be a problem and console showing 2 time because your render is calling 2 times, you need to inspect more and findout where the problem is.
– Just code
Nov 16 at 5:18
post the code for components calling this. they are probably updating state and thus causing rerender
– Daniel Lizik
Nov 16 at 5:19
As others have said, it's getting re-rendered, that's why it's printing the props twice. Find out why that is, could be because an ancestor is re-rendering, could be cos the store is changing, could be other reasons
– Jayce444
Nov 16 at 5:23
are you seeing double the amount of images? this shouldn't happen just because you received props twice? It will always only render once per update with what ever is in your array, if you are seeing duplicate images, then it's probably something to do with your reducer, please share the reducer code.
– Lloyd
Nov 16 at 5:28