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!

CodePudding user response：

You don't need extra curly brackes 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>

CodePudding user response：

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

CodePudding user response：

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