CODEWITHSUNDEEP
javascriptreactjs
jay
jay

Reputation: 338

Check Input as its being typed ReactJS

I would like to check an input as it's being typed, without pressing a key or a button asynchronously.I would like to set a variables value to true if a person has typed more than 4 letters.

I think it would also be fine if the value sets to true (if the value is 4 or more letters) after the user clicks outside the inputbox , but I prefer the former

Mock Code

var hasTypedMoreThan4Letters = false; //changes to true when more than 4 letters are typed in inp1

<input type="text" className="input1" id="inp1" onChange={onTypingMoreThan4Letters}/>

Not sure if it helps but Mock Image below

Mock Image

Upvotes: 1

Views: 570

Answers (4)

Ioannis Potouridis
Ioannis Potouridis

Reputation: 1316

I don't see a reason you should have a second state for the length of the value.

function App() {
  const [value, setValue] = useState('');
  const hasTypedMoreThan4Letters = value.length > 4;

  const handleChange = (event) => {
    setValue(event.target.value);
  }

  return <input onChange={handleChange} value={value} />;
}

Upvotes: 1

MagnusEffect
MagnusEffect

Reputation: 3915

You can create a function like this.

So I have created two states for the value of input and for checking more than 4 characters.

import { useState } from "react";


const MyComponent = () => {
  const [val, setVal] = useState("");
  const [greaterthanfour, setGreaterthanfour] = useState(false);
 
  const handleChange = (e) => {
     setVal(e.target.value);
     if( val.length > 4) setGreaterthanfour(true);
  }

  return (
     <div>
       <input value={val} onChange={handleChange} />
       {
         greaterthanfour ?
              ( <div> You have entered MORE than 4 characters </div> )
              :
              (<div> You have entered LESS than 4 characters </div> )
        }
     </div>
  )
}

export default MyComponent;

Upvotes: 0

Ozeus
Ozeus

Reputation: 191

You could probably do something like this. This will check if more than 4 letters have been typed and display a message if hasMore is true.

import React from 'react';
export default function App() {

  const [hasMore, setHasMore] = React.useState(false)
  const [val, setVal] = React.useState("");

  const hasTypedMoreThan4Letters = (e)=>{
    setHasMore(e.target.value.length > 4)
    setVal(e.target.value)
  }
  return (
    <div className="App">
<input type="text" className="input1" id="inp1" value={val} onChange={hasTypedMoreThan4Letters}/>
      {hasMore && (
        <h1> has more than 4 letters</h1>
      )}
    </div>
  );
}

Upvotes: 2

VladSofronov
VladSofronov

Reputation: 106

You need controlled components(controlled input). Here is my version using hooks. You get the number of symbols entered in count variable.

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

export default function App() {
  const [count, setCount] = useState(0);
  function handleInput(e) {
    setInput(e.target.value);
    setCount((prev) => prev + 1);
  }
  const [input, setInput] = useState("");
  return (
    <div className="App">
      <input value={input} onInput={handleInput} />
      <p>{count}</p>
    </div>
  );
}

Upvotes: 2

Related Questions