ReactJS color not updating

Question

So bacially, I've been trying to implement a method to change the email input background to red if it is not valid, and green if it is. Here's my code:

var bgColors = { "default": "green",
                 "error": "red",
};

const SignUp = ({ history }) => {
    // Irrelevant methods skipped...
    const [emailBgColor, setEmailBgColor] = useState (
        bgColors.default
    );

    /* When input for email address changes, try to validate the email address */
    const handleEmailChange = (event) => {
        const emailInput = event.target.value;
        let lastAtPos = emailInput.lastIndexOf('@');
        let lastDotPos = emailInput.lastIndexOf('.');
        let validFormat = lastAtPos > 0 && lastDotPos > 2 && lastAtPos < lastDotPos;

        // Tries validating email address here
        if(emailInput === "" || !validFormat) {
            console.log("Invalid email"); // This line logs correctly
            setEmailBgColor(bgColors.error);
            console.log({emailBgColor}); // This line also logs correctly
        }
        else{
            setEmailBgColor(bgColors.default);
        }
    };

    return(
        <input onChange={handleEmailChange}
         style={{backgroundColor: {emailBgColor}}}
        /> {/*Does not work, does not even show the default green color*/}
    )
}

Which as the comments in the code suggested, does not update the colors despite console.log indicates that the emailBgColor has changed.

I tried doing style={{backgroundColor: "blue"}} and that apparently works. I wonder what could be the cause? Thanks.

Edison D'souza · Accepted Answer · 2020-05-14 06:06:39Z

3

I think the syntax you have used is incorrect. Have you tried backgroundColor: emailBgColor?

answered May 14, 2020 at 6:06

Edison D'souza

4,6405 gold badges30 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maggie Mao Over a year ago

Wait that actually fixed it! My bad thought I needed to put emailBgColor in curly braces. Is it because emailBgColor is not a JSX component?

Edison D'souza Over a year ago

No."backgroundColor" property accepts only the data of type "string". But you were passing an "object".

imran haider · Accepted Answer · 2020-05-14 06:10:29Z

1

Replace your code with following. emailBgColor is not an object property, it is a string. You see const bgColors = { default: "green", error: "red" }; is an object but bgColors.default is a string which you are setting in setEmailBgColor

<input
  onChange={handleEmailChange}
  style={{ backgroundColor: emailBgColor }}
/>

answered May 14, 2020 at 6:10

imran haider

3434 silver badges7 bronze badges

Collectives™ on Stack Overflow

ReactJS color not updating

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related