I want to use jquery in react

Question

I want to use jquery in react. I have an input field in my project.I'm making a match event with 'this.state.value' in my input field. In this control, my input borders have green borders if they match, and red borders if they don't. I want the border to stay with permanent color if there is no match. How can i do it ?

<input className={this.state.value1 != this.state.value1.match(/^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/) ? "redBorder inputInfo" : "greenBorder inputInfo"} name="value1"  type="text"  placeholder="Name" value1={this.state.value1} onChange={this.handleChange} />

This is css :

input[type=text].redBorder:focus{
    border: 3px solid red;
}

Does this answer your question? [What is the right way to use Jquery in React?](https://stackoverflow.com/questions/51304288/what-is-the-right-way-to-use-jquery-in-react) — empiric, Sep 10 '21 at 07:39
So take out the requirement that the element have the `:focus` before the red CSS is applied. Involving jQuery is an utterly bizarre idea. — Quentin, Sep 10 '21 at 07:42
You're right Quentin but my borders have initial color so i need to use focus — Oğuzhan Memiş, Sep 10 '21 at 07:55

score 0 · Accepted Answer · answered Sep 10 '21 at 08:03

You can use a state variable to check if the input is valid, and change the classname accordingly. Here is a working codesandbox

styles:

.App {
  font-family: sans-serif;
  text-align: center;
}

input[type="text"] {
  border: 1px solid black;
}

input[type="text"].redBorder {
  border: 1px solid red;
}

input[type="text"].greenBorder {
  border: 1px solid green;
}

input[type="text"]:focus {
  outline: none;
}

Handling Input:

import { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const [inputIsValid, setInputIsValid] = useState(null);
  const [inputValue, setInputValue] = useState("");

  useEffect(() => {
    if (inputValue.length > 0) {
      if (inputValue.match(/^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/)) setInputIsValid(true);
      else setInputIsValid(false);
    } else setInputIsValid(null);
  }, [inputValue]);

  const handleValueChange = (e) => setInputValue(e.target.value);

  return (
    <div className="App">
      <input
        type="text"
        className={
          inputIsValid === null
            ? ""
            : inputIsValid
            ? "greenBorder"
            : "redBorder"
        }
        value={inputValue}
        onChange={handleValueChange}
      />
    </div>
  );
}

The KNVB · Answer 2 · 2021-09-10T08:38:40.977

This is my solution. You may try it on my codesandbox.

import "./styles.css";
import React, { useState } from "react";
export default function App() {
  let [borderClass, setBorderClass] = useState("");
  let pattern = /^[a-zA-ZĞÜŞİÖÇğüşiöç]+$/;
  let handleChange = (e) => {
    if (e.target.value === "") {
      setBorderClass("");
    } else {
      if (e.target.value.match(pattern)) {
        setBorderClass("greenborder");
      } else {
        setBorderClass("redborder");
      }
    }
  };
  return (
    <div className="App">
      <input type="text" className={borderClass} onKeyUp={handleChange} />
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}
input[type="text"]:focus {
  outline: none;
}
.greenborder {
  border: 1px solid green;
}
.redborder {
  border: 1px solid red;
}

Thanks, answered. Yours looks correct as well. Thanks for your interest. — Oğuzhan Memiş, Sep 10 '21 at 10:42

I want to use jquery in react

2 Answers2