Adding data to array using UseState onChange

Question

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])}/>

You can use onBlur for loss of focus (which is when the vanilla 'change' event would usually trigger for an input, React's onChange is actually equivalent to 'input') otherwise you'll need to set your own parameters for what constitutes 'done typing' ie debounce the handler or the like. — pilchard
– pilchard, Commented May 12, 2022 at 21:03
How are you determining how the user has stopped typing? Anyway, use a separate state for the input, and whether you're using onBlur to determine whether the user has stopped typing like @pilchard suggests, or you use a button with an onClick, just add that input state to the the main state. — Andy
– Andy, Commented May 12, 2022 at 21:08
The only issue with setting an state directly, is that i am having an button to add more input fields, which is why im pushing all the results to an array. so for every input field dynamically created, i would need to make a new state dynamically. it might be 2 fields, it might be 100. which causes problems creating and finding that state in lets say an submit button — catfish
– catfish, Commented May 12, 2022 at 21:15
You either need to delay adding to the state (via setTimeout) if you want it to add when the user is "done typing" (not well defined), or include a different mechanism, such as when the user clicks a separate button or perhaps loses focus from the input. — romellem
– romellem, Commented May 12, 2022 at 21:32

Nijaz · Accepted Answer · 2022-05-12 21:18:14Z

2

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.

answered May 12, 2022 at 21:18

Nijaz

1982 gold badges2 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Martijn Pieters · Accepted Answer · 2022-05-19 19:59:57Z

1

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

edited May 19, 2022 at 19:59

Martijn Pieters

1.1m326 gold badges4.2k silver badges3.4k bronze badges

answered May 12, 2022 at 21:26

Gavin Holmes

1,3448 silver badges19 bronze badges

1 Comment

Gavin Holmes Over a year ago

if you're going for something that replaces the the state entirely and doesn't just pile the text values on top of each other, remove ...old from setSubjects((old) => [...old, input]) so you just have setSubjects(input) when setting the subjects inside of the useEffect().

Collectives™ on Stack Overflow

Adding data to array using UseState onChange

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related