how to apply a multiconditional to style a react component?

I'm newbie 0
Viewed 41

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%;
`;
reactjs
1 Answers

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>
 );


}
irous0
Related