how to apply a multiconditional to style a react component? - reactjs

Question

I have a form where the borders of the inputs have 2 colors
-Grey: when the component is loaded
-blue: when the input is not empty
and I would like to apply a third color when the user presses the register button and the inputs are not empty that changes the border color to red. but I do not know how
Page
const hanleClear= () => {
setCompania(0);
setDepartamento(0);
setUnidad(0);
setLocalidad(0);
setActivoTipo(0);
setActivoTipoCatego(0);
setMarca("");
setColor("");
setModelo("");
setComponente("");
setSerial("");
setObservacion("");
};
const hanleSerial= (e) => {
setSerial(e.target.value.toUpperCase());
};
const handleSumit = function (e) {
e.preventDefault();
if (serial === 0) {
// Apply color red.
}
let form = {
idinformacion: compania,
iddepartamento: departamento,
idunidad: unidad,
};
let Data = JSON.stringify(form );
ServiceSerial.Create(Data);
};
<InputGroup
input_label={"Serial"}
input_type={"text"}
input_value={serial}
input_placeholder={"Serial"}
state_name={serial}
set_state_name={setSerial}
on_change={hanleSerial}
/>
<button onClick={hanleSumit}>Register</button>
<br />
<button onClick={hanleClear}>Limpiar</button>
<br />
Componenet
import {
Input,
Label,
InputGroupContainer,
WrapperInput,
} from "../components/FormStyled";
const InputGroup = function ({
input_label,
input_type,
input_value,
input_name,
input_placeholder,
on_change,
on_key_down,
}) {
return (
<InputGroupContainer>
<Label>{input_label}</Label>
<WrapperInput>
<Input
type={input_type}
placeholder={input_placeholder}
value={input_value}
name={input_name}
onChange={on_change}
onKeyDown={on_key_down}
className={!input_value ? "" : "Activated"}
/>
</WrapperInput>
{/* <span>{errorMessage}</span> */}
</InputGroupContainer>
);
};
export default InputGroup;
css
// LABEL
export const Label = styled.label`
font-size: 16px;
cursor: pointer;
letter-spacing: 0.8px;
color: black;
margin-top: 15px;
margin-bottom: 5px;
font-family: "Inter";
font-weight: 900;
`;
// INPUT
export const Input = styled.input`
font-size: 16px;
font-weight: normal;
font-family: "Inter";
letter-spacing: 0.3px;
width: 100%;
height: 40px;
line-height: 40px;
padding: 0px 5px 0px 10px;
border: 2px solid #ccc;
border-radius: 0px;
transition: 0.3s ease all;
border-radius: 3px;
color: black;
&:focus {
outline: none;
border: 2px solid #00aea9;
}
&.Activated {
border: 2px solid #00aea9;
}
`;
// Input Group
export const InputGroupContainer = styled.div`
margin: 15px 0px;
position: relative;
width: 100%;
`;

Answer 1

I can give you a general solution. If you get it, you can adapt it to your specific code.
I use a state called inputState to denote if the input is empty/filled/filled&pressed.
Then your component just composes style based on that state whenever rendering.
function ComponentABC() {
const [inputState, setInputState] = useState(1);
let inputStyle = {borderCorlor: 'grey'};
if(inputState == 1) { /* empty */
inputStyle = {borderCorlor: 'grey'};
}
else if(inputState == 2) { /* filled */
inputStyle = {borderCorlor: 'blue'};
}
else if(inputState == 3) { /* filled & pressed */
inputStyle = {borderCorlor: 'red'};
}
// when pressed button, change color
function handleRegister(e) {
if(inputValue) {
setInputState(3);
}
}
function handleInputChange(e) {
// when input is filled, change color
if(inputValue) {
setInputState(2);
}
// when input is empty, change color
else if(!inputValue) {
setInputState(1);
}
}
return (
<div>
<input style={inputStyle} onChange={handleInputChange}/>
<button onClick={handleRegister}>register</button>
</div>
);
}