Adding data to array using UseState onChange-CodePudding

I am having some issues figuring out how I can get the state of an inputfield, and add it to an useState array.

The way this code is set up, using onChange, it will add every character I type in the textField as a new part of the array, but I dont want to set the value until the user is done typing.

What would be a simple solution to this?

My code:

const [subject, setSubject] = useState([]);`

<input type="text" placeholder={"Eks. 'some example'"} onChange={(e) => setSubject(oldArray => [...oldArray, e.target.value])}/>

CodePudding user response：

Well, I am not confident with react yet, but unless you don't want to do some validation, why don't you use useRef hook and onBlur combination. UseRef hook basically set a reference on element and then you can use value from that reference which in your case would be textField value. OnBlur will trigger when user clicks outside of input (input lose focus) Code should look like this:

import react, {useRef, useState} from "react";

const someComponent = (props) => {
    const [subject, setSubject] = useState([]);
    const textAreaRef = useRef();

    const onBlurHandler = () => {
         setSubject((prevSubject) => [...prevSubject, textAreaRef.current.value]);
    }

    return <input type="text" placeholder={"Eks. 'some example'"} ref={textAreaRef} onBlur={onBlurHandler}/>
}

Other way would be to use debouncing with useEffet.

CodePudding user response：

this is a little something i cooked up for you... it watches the change of the input, and 1 second after the person stops typing, it will add the input value.

The main things to look at here are the useEffect() and the <input /> with the new state i made [input, setInput]. or you can play around with this here

export default function App() {

  const [subjects,setSubjects] = useState([]);
  const [input,setInput] = useState("")

  useEffect(() => {
    const timer = setTimeout(() => {
      setSubjects(old => [...old, input])
    }, 1000)

    return () => clearTimeout(timer)
  }, [input])

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input placeholder="type here" 
      value={input}
      type="text" 
      onChange={e => setInput(e.target.value)}
      />
      {subjects.length === 0 ? 
        <h3>Nothing yet...</h3>
        :
        <h3>{subjects}</h3>
      }
    </div>
  );
}

lmk if this helped ;)