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}}} ?

edited Nov 22 '18 at 10:27

asked Nov 22 '18 at 8:47

Tested

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

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}}} ?

edited Nov 22 '18 at 10:27

asked Nov 22 '18 at 8:47

Tested

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

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}}} ?

edited Nov 22 '18 at 10:27

asked Nov 22 '18 at 8:47

Tested

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

edited Nov 22 '18 at 10:27

asked Nov 22 '18 at 8:47

Tested

1741318

edited Nov 22 '18 at 10:27

asked Nov 22 '18 at 8:47

Tested

1741318

edited Nov 22 '18 at 10:27

asked Nov 22 '18 at 8:47

Tested

1741318

asked Nov 22 '18 at 8:47

Tested

1741318

asked Nov 22 '18 at 8:47

Tested

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

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 Answer
1

active

oldest

votes

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>

edited Nov 22 '18 at 9:05

answered Nov 22 '18 at 8:52

Shubham 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 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

|
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');
});

Post as a guest

Name

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

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

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>

edited Nov 22 '18 at 9:05

answered Nov 22 '18 at 8:52

Shubham 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 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

|
show 1 more comment

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>

edited Nov 22 '18 at 9:05

answered Nov 22 '18 at 8:52

Shubham 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 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

|
show 1 more comment

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>

edited Nov 22 '18 at 9:05

answered Nov 22 '18 at 8:52

Shubham 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>

edited Nov 22 '18 at 9:05

answered Nov 22 '18 at 8:52

Shubham Khatri

91.9k15115156

edited Nov 22 '18 at 9:05

answered Nov 22 '18 at 8:52

Shubham Khatri

91.9k15115156

answered Nov 22 '18 at 8:52

Shubham Khatri

91.9k15115156

answered Nov 22 '18 at 8:52

Shubham 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 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

|
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 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

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 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

|
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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Wsrtjtyk