CODEWITHSUNDEEP
javascriptreactjs
JackTheKnife
JackTheKnife

Reputation: 4144

ReactJS: change input field border color for particular element ID

I'm having hard time to change input field border color for selected elements based on theirs IDs.

I have tried vanilla JavaScript like

       fetch("/login?"+query, {
            method: "GET",
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            credentials: "include"
        }).then(response => {
            status = response.status;
            return response.json()
        }).then(data => {
            if (status==200) {
                //log in
            }
            else {
                if (status==404) {
                  document.getElementById('user').style.border('1px solid red');
                  document.getElementById('password').style.border('1px solid red');
                }
            }
        }).catch(err => {
            setErrors({
                systemErr: err
            });
        })

but what failed with an error that not able to render modified child element.

Also I have styles set for required fields indications as

style={getStyles(touched, props.errors, 'password')}

then

function getStyles (touched, error, fieldName) {
    if (errors[fieldName] && touched[fieldName]) {
        return {
            border: '1px solid red'
        }
    }
};

and that works fine but what I need to have get a border when the API will not return anything as well. Side note - I'm using Formik with Yup for validation of required fields.

Any tips on that?

Upvotes: 0

Views: 2633

Answers (2)

Ranjith
Ranjith

Reputation: 157

You can just add states to the components and just pass them to component styles.

Upvotes: 1

Prabhat Kumar
Prabhat Kumar

Reputation: 530

Replace your lines with this code.

 document.getElementById('user').style.border = '1px solid red';
 document.getElementById('password').style.border ='1px solid red';

You are calling border as a function but its a property.

Upvotes: 1

Related Questions