How can state be updated with string and the update state
-1
I'm doing here is updating the state with the string which work something like the following:
changeColorE(e){
this.setState({error:"style={{backgroundColor :" +this.state.colorNew +"}}"},()=>console.log("-------",this.state.error))
}
In render I've
const { error }=this.state;
I get the error here {error} it says
Parsing error: Unexpected token, expected "..."
<div className="col-2" {error} onClick={this.changeColorE.bind(this)}></div>
How can {error} something like that be done for an element? Am I going the right way or whats the right way?
Why it doesn't work with just {error} and not {...error} ?
the errorClr doesn't work i'm passing the error to it n declared
const { error }=this.state;
const {errorClr}={style:{color : {error}}}; // this doesnt work the way?
<div className="col-8" {...errorClr}>Please enter valid data</div>
The color proptery doesn't reflect.I've done no setstate. Can we not do something of this sort {style:{color : {error}}} ?
reactjs
asked Nov 22 '18 at 8:47
TestedTested
1741318
add a comment |
-1
I'm doing here is updating the state with the string which work something like the following:
changeColorE(e){
this.setState({error:"style={{backgroundColor :" +this.state.colorNew +"}}"},()=>console.log("-------",this.state.error))
}
In render I've
const { error }=this.state;
I get the error here {error} it says
Parsing error: Unexpected token, expected "..."
<div className="col-2" {error} onClick={this.changeColorE.bind(this)}></div>
How can {error} something like that be done for an element? Am I going the right way or whats the right way?
Why it doesn't work with just {error} and not {...error} ?
the errorClr doesn't work i'm passing the error to it n declared
const { error }=this.state;
const {errorClr}={style:{color : {error}}}; // this doesnt work the way?
<div className="col-8" {...errorClr}>Please enter valid data</div>
The color proptery doesn't reflect.I've done no setstate. Can we not do something of this sort {style:{color : {error}}} ?
reactjs
asked Nov 22 '18 at 8:47
TestedTested
1741318
Have you tried using this.state.error?
– Ben Swindells
Nov 22 '18 at 9:04
I' using const {error}=this.state so just error must workout
– Tested
Nov 22 '18 at 9:07
Its because your placing your styles in "" qoutations this means the error state is being ignored.
– Ben Swindells
Nov 22 '18 at 9:12
u mean if any updated state if in string gets ignored?
– Tested
Nov 22 '18 at 9:15
add a comment |
-1
-1
-1
I'm doing here is updating the state with the string which work something like the following:
changeColorE(e){
this.setState({error:"style={{backgroundColor :" +this.state.colorNew +"}}"},()=>console.log("-------",this.state.error))
}
In render I've
const { error }=this.state;
I get the error here {error} it says
Parsing error: Unexpected token, expected "..."
<div className="col-2" {error} onClick={this.changeColorE.bind(this)}></div>
How can {error} something like that be done for an element? Am I going the right way or whats the right way?
Why it doesn't work with just {error} and not {...error} ?
the errorClr doesn't work i'm passing the error to it n declared
const { error }=this.state;
const {errorClr}={style:{color : {error}}}; // this doesnt work the way?
<div className="col-8" {...errorClr}>Please enter valid data</div>
The color proptery doesn't reflect.I've done no setstate. Can we not do something of this sort {style:{color : {error}}} ?
reactjs
asked Nov 22 '18 at 8:47
TestedTested
1741318
I'm doing here is updating the state with the string which work something like the following:
changeColorE(e){
this.setState({error:"style={{backgroundColor :" +this.state.colorNew +"}}"},()=>console.log("-------",this.state.error))
}
In render I've
const { error }=this.state;
I get the error here {error} it says
Parsing error: Unexpected token, expected "..."
<div className="col-2" {error} onClick={this.changeColorE.bind(this)}></div>
How can {error} something like that be done for an element? Am I going the right way or whats the right way?
Why it doesn't work with just {error} and not {...error} ?
the errorClr doesn't work i'm passing the error to it n declared
const { error }=this.state;
const {errorClr}={style:{color : {error}}}; // this doesnt work the way?
<div className="col-8" {...errorClr}>Please enter valid data</div>
The color proptery doesn't reflect.I've done no setstate. Can we not do something of this sort {style:{color : {error}}} ?
reactjs
reactjs
asked Nov 22 '18 at 8:47
TestedTested
1741318
asked Nov 22 '18 at 8:47
TestedTested
1741318
edited Nov 22 '18 at 10:27
Tested
asked Nov 22 '18 at 8:47
TestedTested
1741318
asked Nov 22 '18 at 8:47
TestedTested
1741318
asked Nov 22 '18 at 8:47
TestedTested
1741318
1741318
Have you tried using this.state.error?
– Ben Swindells
Nov 22 '18 at 9:04
I' using const {error}=this.state so just error must workout
– Tested
Nov 22 '18 at 9:07
Its because your placing your styles in "" qoutations this means the error state is being ignored.
– Ben Swindells
Nov 22 '18 at 9:12
u mean if any updated state if in string gets ignored?
– Tested
Nov 22 '18 at 9:15
add a comment |
Have you tried using this.state.error?
– Ben Swindells
Nov 22 '18 at 9:04
I' using const {error}=this.state so just error must workout
– Tested
Nov 22 '18 at 9:07
Its because your placing your styles in "" qoutations this means the error state is being ignored.
– Ben Swindells
Nov 22 '18 at 9:12
u mean if any updated state if in string gets ignored?
– Tested
Nov 22 '18 at 9:15
Have you tried using this.state.error?
– Ben Swindells
Nov 22 '18 at 9:04
Have you tried using this.state.error?
– Ben Swindells
Nov 22 '18 at 9:04
I' using const {error}=this.state so just error must workout
– Tested
Nov 22 '18 at 9:07
I' using const {error}=this.state so just error must workout
– Tested
Nov 22 '18 at 9:07
Its because your placing your styles in "" qoutations this means the error state is being ignored.
– Ben Swindells
Nov 22 '18 at 9:12
Its because your placing your styles in "" qoutations this means the error state is being ignored.
– Ben Swindells
Nov 22 '18 at 9:12
u mean if any updated state if in string gets ignored?
– Tested
Nov 22 '18 at 9:15
u mean if any updated state if in string gets ignored?
– Tested
Nov 22 '18 at 9:15
add a comment |
1 Answer
1
active
oldest
votes
0
Dont save the style as a string, however save it as an object like
changeColorE(e){
this.setState({
error: {
style: { backgroundColor : this.state.colorNew }
}
},()=> console.log("-------",this.state.error))
}
and then use it like
<div className="col-2" {...error} onClick={this.changeColorE.bind(this)}></div>
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Properties in jsx cannot be passed like{error}, either you spread the props or specify aserror={error}, hence you must use an object which you can spread like{...error}
– Shubham Khatri
Nov 22 '18 at 9:16
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
|
show 1 more 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%2f53426973%2fhow-can-state-be-updated-with-string-and-the-update-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
0
Dont save the style as a string, however save it as an object like
changeColorE(e){
this.setState({
error: {
style: { backgroundColor : this.state.colorNew }
}
},()=> console.log("-------",this.state.error))
}
and then use it like
<div className="col-2" {...error} onClick={this.changeColorE.bind(this)}></div>
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Properties in jsx cannot be passed like{error}, either you spread the props or specify aserror={error}, hence you must use an object which you can spread like{...error}
– Shubham Khatri
Nov 22 '18 at 9:16
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
|
show 1 more comment
0
Dont save the style as a string, however save it as an object like
changeColorE(e){
this.setState({
error: {
style: { backgroundColor : this.state.colorNew }
}
},()=> console.log("-------",this.state.error))
}
and then use it like
<div className="col-2" {...error} onClick={this.changeColorE.bind(this)}></div>
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Properties in jsx cannot be passed like{error}, either you spread the props or specify aserror={error}, hence you must use an object which you can spread like{...error}
– Shubham Khatri
Nov 22 '18 at 9:16
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
|
show 1 more comment
0
0
0
Dont save the style as a string, however save it as an object like
changeColorE(e){
this.setState({
error: {
style: { backgroundColor : this.state.colorNew }
}
},()=> console.log("-------",this.state.error))
}
and then use it like
<div className="col-2" {...error} onClick={this.changeColorE.bind(this)}></div>
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
Dont save the style as a string, however save it as an object like
changeColorE(e){
this.setState({
error: {
style: { backgroundColor : this.state.colorNew }
}
},()=> console.log("-------",this.state.error))
}
and then use it like
<div className="col-2" {...error} onClick={this.changeColorE.bind(this)}></div>
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
edited Nov 22 '18 at 9:05
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
answered Nov 22 '18 at 8:52
Shubham KhatriShubham Khatri
91.9k15115156
91.9k15115156
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Properties in jsx cannot be passed like{error}, either you spread the props or specify aserror={error}, hence you must use an object which you can spread like{...error}
– Shubham Khatri
Nov 22 '18 at 9:16
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
|
show 1 more comment
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Properties in jsx cannot be passed like{error}, either you spread the props or specify aserror={error}, hence you must use an object which you can spread like{...error}
– Shubham Khatri
Nov 22 '18 at 9:16
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
doesn't work :( y have u " +this.state.colorNew +" as string? y v require ...error instead of just error
– Tested
Nov 22 '18 at 8:59
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Sorry for the error, Please check the updated answer
– Shubham Khatri
Nov 22 '18 at 9:05
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Worked .can u please explain y not string n y object ? y {...error} not {error} ?Because of {...error} default error not getting applied
– Tested
Nov 22 '18 at 9:09
Properties in jsx cannot be passed like
{error}, either you spread the props or specify as error={error}, hence you must use an object which you can spread like {...error}– Shubham Khatri
Nov 22 '18 at 9:16
Properties in jsx cannot be passed like
{error}, either you spread the props or specify as error={error}, hence you must use an object which you can spread like {...error}– Shubham Khatri
Nov 22 '18 at 9:16
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
any link where i can learn more about it?
– Tested
Nov 22 '18 at 9:17
|
show 1 more 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%2f53426973%2fhow-can-state-be-updated-with-string-and-the-update-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
Have you tried using this.state.error?
– Ben Swindells
Nov 22 '18 at 9:04
I' using const {error}=this.state so just error must workout
– Tested
Nov 22 '18 at 9:07
Its because your placing your styles in "" qoutations this means the error state is being ignored.
– Ben Swindells
Nov 22 '18 at 9:12
u mean if any updated state if in string gets ignored?
– Tested
Nov 22 '18 at 9:15