Mixing
Handling dynamic background from React state
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I have a React component, that has a background image. The choice of an image is handled like this:
state = {
image: 0
}
let backgroundImage;
backgroundImage =
"url(" +
require(`../../img/bar/${getProgressBackground(this.state.image)}`) +
")";
There's an action button, that, once triggered, sets a counter to the image state:
.then(() => {
events.watch(
function(err, result) {
if (!err && result.event === "Event") {
this.setState({
loading: false,
image: this.state.image + 1,
});
} else if (err) {
alert(
"An error happened!"
);
}
}.bind(this)
);
});
The expected behavior is that when triggered, the button would setState image from 0 to 1, and then getProgressBackground would pick the proper background and change it as needed.
However, what I receive is an error, and the app is looping and crashing:
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
What would be the right way to handle this and get the expected behavior?
reactjs
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
asked Jan 3 at 14:55
RuhamRuham
211113
add a comment |
I have a React component, that has a background image. The choice of an image is handled like this:
state = {
image: 0
}
let backgroundImage;
backgroundImage =
"url(" +
require(`../../img/bar/${getProgressBackground(this.state.image)}`) +
")";
There's an action button, that, once triggered, sets a counter to the image state:
.then(() => {
events.watch(
function(err, result) {
if (!err && result.event === "Event") {
this.setState({
loading: false,
image: this.state.image + 1,
});
} else if (err) {
alert(
"An error happened!"
);
}
}.bind(this)
);
});
The expected behavior is that when triggered, the button would setState image from 0 to 1, and then getProgressBackground would pick the proper background and change it as needed.
However, what I receive is an error, and the app is looping and crashing:
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
What would be the right way to handle this and get the expected behavior?
reactjs
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
asked Jan 3 at 14:55
RuhamRuham
211113
Can you paste the code where you're using setState?
– dan
Jan 3 at 14:56
Updated in the code.
– Ruham
Jan 3 at 15:03
How do you use backgroundImage in your page as far as it rendering in the image?
– Scott Craig
Jan 3 at 15:17
add a comment |
I have a React component, that has a background image. The choice of an image is handled like this:
state = {
image: 0
}
let backgroundImage;
backgroundImage =
"url(" +
require(`../../img/bar/${getProgressBackground(this.state.image)}`) +
")";
There's an action button, that, once triggered, sets a counter to the image state:
.then(() => {
events.watch(
function(err, result) {
if (!err && result.event === "Event") {
this.setState({
loading: false,
image: this.state.image + 1,
});
} else if (err) {
alert(
"An error happened!"
);
}
}.bind(this)
);
});
The expected behavior is that when triggered, the button would setState image from 0 to 1, and then getProgressBackground would pick the proper background and change it as needed.
However, what I receive is an error, and the app is looping and crashing:
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
What would be the right way to handle this and get the expected behavior?
reactjs
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
asked Jan 3 at 14:55
RuhamRuham
211113
I have a React component, that has a background image. The choice of an image is handled like this:
state = {
image: 0
}
let backgroundImage;
backgroundImage =
"url(" +
require(`../../img/bar/${getProgressBackground(this.state.image)}`) +
")";
There's an action button, that, once triggered, sets a counter to the image state:
.then(() => {
events.watch(
function(err, result) {
if (!err && result.event === "Event") {
this.setState({
loading: false,
image: this.state.image + 1,
});
} else if (err) {
alert(
"An error happened!"
);
}
}.bind(this)
);
});
The expected behavior is that when triggered, the button would setState image from 0 to 1, and then getProgressBackground would pick the proper background and change it as needed.
However, what I receive is an error, and the app is looping and crashing:
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
What would be the right way to handle this and get the expected behavior?
reactjs
reactjs
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
asked Jan 3 at 14:55
RuhamRuham
211113
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
asked Jan 3 at 14:55
RuhamRuham
211113
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
edited Jan 3 at 16:05
Sung M. Kim
17.9k33112165
17.9k33112165
asked Jan 3 at 14:55
RuhamRuham
211113
asked Jan 3 at 14:55
RuhamRuham
211113
asked Jan 3 at 14:55
RuhamRuham
211113
211113
Can you paste the code where you're using setState?
– dan
Jan 3 at 14:56
Updated in the code.
– Ruham
Jan 3 at 15:03
How do you use backgroundImage in your page as far as it rendering in the image?
– Scott Craig
Jan 3 at 15:17
add a comment |
Can you paste the code where you're using setState?
– dan
Jan 3 at 14:56
Updated in the code.
– Ruham
Jan 3 at 15:03
How do you use backgroundImage in your page as far as it rendering in the image?
– Scott Craig
Jan 3 at 15:17
Can you paste the code where you're using setState?
– dan
Jan 3 at 14:56
Can you paste the code where you're using setState?
– dan
Jan 3 at 14:56
Updated in the code.
– Ruham
Jan 3 at 15:03
Updated in the code.
– Ruham
Jan 3 at 15:03
How do you use backgroundImage in your page as far as it rendering in the image?
– Scott Craig
Jan 3 at 15:17
How do you use backgroundImage in your page as far as it rendering in the image?
– Scott Craig
Jan 3 at 15:17
add a comment |
1 Answer
1
active
oldest
votes
You cannot use require dynamically like this.
Use a switch instead:
switch (name) {
case 'a': return require('./a');
case 'b': return require('./b');
// etc...
}
as suggested in this issue.
Your code should look something like this:
getProgressBackground = progressState => {
case 'ready': return require('/path/to/greenBg.jpg');
case 'inProgress': return require('path/to/yellowBg.jpg');
}
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
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%2f54024715%2fhandling-dynamic-background-from-react-state%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 cannot use require dynamically like this.
Use a switch instead:
switch (name) {
case 'a': return require('./a');
case 'b': return require('./b');
// etc...
}
as suggested in this issue.
Your code should look something like this:
getProgressBackground = progressState => {
case 'ready': return require('/path/to/greenBg.jpg');
case 'inProgress': return require('path/to/yellowBg.jpg');
}
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
add a comment |
You cannot use require dynamically like this.
Use a switch instead:
switch (name) {
case 'a': return require('./a');
case 'b': return require('./b');
// etc...
}
as suggested in this issue.
Your code should look something like this:
getProgressBackground = progressState => {
case 'ready': return require('/path/to/greenBg.jpg');
case 'inProgress': return require('path/to/yellowBg.jpg');
}
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
add a comment |
You cannot use require dynamically like this.
Use a switch instead:
switch (name) {
case 'a': return require('./a');
case 'b': return require('./b');
// etc...
}
as suggested in this issue.
Your code should look something like this:
getProgressBackground = progressState => {
case 'ready': return require('/path/to/greenBg.jpg');
case 'inProgress': return require('path/to/yellowBg.jpg');
}
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
You cannot use require dynamically like this.
Use a switch instead:
switch (name) {
case 'a': return require('./a');
case 'b': return require('./b');
// etc...
}
as suggested in this issue.
Your code should look something like this:
getProgressBackground = progressState => {
case 'ready': return require('/path/to/greenBg.jpg');
case 'inProgress': return require('path/to/yellowBg.jpg');
}
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
edited Jan 4 at 3:03
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
answered Jan 3 at 15:18
gazdagergogazdagergo
1,420818
1,420818
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
add a comment |
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
Thanks for the answer, but I can't understand where do I have to use the switch. Is it in inside of the render?
– Ruham
Jan 3 at 16:37
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I moved everything into a switch case, but it still doesn't work. I get the same loop.
– Ruham
Jan 3 at 17:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
I completed my answer how it might look like in your case.
– gazdagergo
Jan 4 at 3:04
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%2f54024715%2fhandling-dynamic-background-from-react-state%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
Can you paste the code where you're using setState?
– dan
Jan 3 at 14:56
Updated in the code.
– Ruham
Jan 3 at 15:03
How do you use backgroundImage in your page as far as it rendering in the image?
– Scott Craig
Jan 3 at 15:17