How to change the style of input element in react

Question

i have this input component:

I want to change the style of input component if the value of input is less than the current year. for example, if the user entered 2020 which is less than 2022, in this case i want to change the color of background for example. Any help will be appreciated

A function will be called to check the entered value and whether we need to change the style or not:

let changeStyle=false;
  
const checkExpireYear = (year: string) => {
    
    // converting the entered year to number
    let enteredYear: number = parseInt(year);
    
    // getting the current year
    const date = new Date();
    let currentYear = date.getFullYear();
    // checking if the entered year is less than the current year
    // based on this condition the style will be changed
    if (enteredYear > currentYear) {
      console.log("valid year");
      changeStyle = false;
    } else {
      console.log("unvalid year");
      changeStyle = true;
    }
  };

and this is my input component :

<CardNumberInput
                className={changeStyle ? "bg-red-400" : ""}
                placeholder="2030"
                onChange={(e) => {
                  if (e.currentTarget.value.length > 3) {
                    checkExpireYear(e.currentTarget.value);
                  }
                }}
/>

it does not show any error, but the style is not changing
Thanx in advance

maybe you should try turning the variable changeStyle into a state — Ala Ben Aicha
– Ala Ben Aicha, Commented Nov 4, 2022 at 11:18
This is the source code: ``` const CardNumberInput = ({ className, length = 4, id, placeholder = "0000", ...props }: Props) => { if (placeholder == undefined) { let ph = ""; if (length == 2) { ph = "00"; } else { ph = "0000"; } } return ( <input type="tel" id={id} // className="" className={classNames("w-[5ch] rounded text-center outline-0", className)} placeholder={placeholder} maxLength={length} required pattern="[0-9]{4}" {...props} /> ); }; ``` — Salar Sali
– Salar Sali, Commented Nov 4, 2022 at 11:39

Bhagya Mudgal · Accepted Answer · 2022-11-04 11:25:28Z

It is because you are not using useState hook for the changeStyle variable

import {useState} from "react";

const [changeStyle, setChangeStyle] = useState(false);
  
const checkExpireYear = (year: string) => {
    
    // converting the entered year to number
    let enteredYear: number = parseInt(year);
    
    // getting the current year
    const date = new Date();
    let currentYear = date.getFullYear();
    // checking if the entered year is less than the current year
    // based on this condition the style will be changed
    if (enteredYear > currentYear) {
      console.log("valid year");
      setChangeStyle(false);
    } else {
      console.log("unvalid year");
      setChangeStyle(true);
    }
  };

Now it should work with no error. When we use useState every time the state of the variable gets changed when we call setChangeStyle, it re-renders the component with new state, which does not happen when you just use let changeStyle

kimia shahbaghi · Accepted Answer · 2022-11-04 11:21:50Z

1

your "changeStyle" variable, should be a state variable. this way, every time that its value changes makes that component re-render and applies other CSS class to it

answered Nov 4, 2022 at 11:21

kimia shahbaghi

4001 silver badge11 bronze badges

Collectives™ on Stack Overflow

How to change the style of input element in react

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related