CODEWITHSUNDEEP
javascriptreactjs
CodeNB
CodeNB

Reputation: 1

React js : setState object to setup button's style and options

I'm new to React, and I couldn't figure out why vscode is telling me there is an error. I made a function component, and within it, I set up initial values for a button as an object using useState hook as the following,

const [loginButtonSetting, setLoginButtonSetting] = useState({buttonColor: "#acd036", isButtonActive: true,});

and within the component's return value, the button's attributes are written like the following,

<button style={{ backgroundColor: { loginButtonSetting.buttonColor} }} disabled={loginButtonSetting.isButtonActive}>Button</button>

for this button, I think the initial value for the button color should be #acd036 and disabled option should be true. But vscode is kept on putting the wriggly underline at "loginButtonSetting" of backgroundColor, saying it's a "parsing error: Unexpected token, expected ','".

Things I have tried:

  1. putting bracket around loginButtonSetting.buttonColor.
  2. using spread operator : [...loginButtonSetting, buttonColor] I knew this wouldn't work though

Please help out if you know what is going on! Thank you!

Upvotes: 0

Views: 33

Answers (3)

Abhishek
Abhishek

Reputation: 806

You don't need extra curly brackets when inside the style object to put the buttonColor, it's because inside object you can put JS directly (here using buttonColor property).

<button style={{ backgroundColor: loginButtonSetting.buttonColor }} disabled={loginButtonSetting.isButtonActive}>Button</button>

Upvotes: 1

dev_integral
dev_integral

Reputation: 112

Just pass the value for the backgroundColor as string literals with back ticks: <button style={{ backgroundColor: '${loginButtonSetting.buttonColor}' }} disabled={loginButtonSetting.isButtonActive}>Button

Upvotes: 0

DecPK
DecPK

Reputation: 25406

You should set backgroundColor as:

STACKBLITZ LINK

<button
        style={{ backgroundColor: loginButtonSetting.buttonColor }}
        disabled={loginButtonSetting.isButtonActive}
      >
        Button
      </button>

What you are setting is:

backgroundColor: { loginButtonSetting.buttonColor}

backgroundColor should be a value not an object

Upvotes: 0

Related Questions