Handle an input with React hooks

Question

I found that there are several ways to handle user's text input with hooks. What is more preferable or proper way to handle an input with hooks? Which would you use?

1) The simplest hook to handle input, but more fields you have, more repetitive code you have to write.

const [username, setUsername] = useState('');
const [password, setPassword] = useState('');

events:

onChange={event => setPassword(event.target.value)}
onChange={event => setUsername(event.target.value)}

2) Similar to above example, but with dynamic key name

const [inputValues, setInputValues] = useState({
  username: '', password: ''
});

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
};

event:

onChange={handleOnChange}

3) An alternative to useState, and as said on ReactJS docs, useReducer is usually preferable to useState.

const [inputValues, setInputValues] = useReducer(
  (state, newState) => ({ ...state, ...newState }),
  {username: '', password: ''}
);

const handleOnChange = event => {
  const { name, value } = event.target;
  setInputValues({ [name]: value });
};

event:

onChange={handleOnChange}

4) useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed.

const [inputValues, setInputValues] = useState({ 
  username: '', password: '' 
});

const handleOnChange = useCallback(event => {
  const { name, value } = event.target;
  setInputValues({ ...inputValues, [name]: value });
});

event:

onChange={handleOnChange}

[useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) doesn't make much sense without the 2nd argument (array of dependencies)... IMHO `useReduce` is more flexible and less error prone than `useState` for objects — Aprillion, Apr 19 '19 at 14:17

Jonas Wilms · Accepted Answer · 2019-11-11T06:24:52.253

141

How about writing a reusable function that returns the input value ... and the <input> itself:

 function useInput({ type /*...*/ }) {
   const [value, setValue] = useState("");
   const input = <input value={value} onChange={e => setValue(e.target.value)} type={type} />;
   return [value, input];
 }

That can then be used as:

 const [username, userInput] = useInput({ type: "text" });
 const [password, passwordInput] = useInput({ type: "text" });

 return <>
   {userInput} -> {username} <br />
   {passwordInput} -> {password}
 </>;

edited Nov 11 '19 at 06:24

answered Apr 22 '19 at 22:25

Jonas Wilms

132,000
20
149
151

could you please throw more light on the syntax after the return. It seems pretty new to me. – Jonathan Akwetey Okine Feb 26 '20 at 09:23
2

@JonathanAkweteyOkine if you are talking about the second return, that's the shorthand syntax for React Fragments. See also here: https://reactjs.org/docs/fragments.html – Marco Feb 27 '20 at 22:45
@Marco thanks. But the syntax i was referring to is this {userInput} -> {username} – Jonathan Akwetey Okine Mar 02 '20 at 13:26
https://reactjs.org/docs/jsx-in-depth.html#javascript-expressions-as-children – Jonas Wilms Mar 02 '20 at 15:46
1

Is that necessary to use prefix ```use``` in functions that are not using any hooks? – Niyas Nazar Apr 23 '20 at 06:24
1

@NiyasNazar no it is not necessary. Actually it is missleading. – Jonas Wilms Apr 23 '20 at 07:06
15

@Marco The -> arrow is just being rendered as text, and is not any special syntax. – EmpireJones Apr 29 '20 at 16:23
1

@JonasWilms won't this rebind the onChange listener each evocation? – duhaime Nov 18 '20 at 11:40
2

@duhaime yes, it would. This snippet is not "ready for copy & paste" it is meant to demonstrate how hooks could be used in the case given with a most minimal example. For sure you can add an `useCallback` to handle this. – Jonas Wilms Nov 19 '20 at 19:09
8

Please don't do this. HTML is a precious public good. Abstracting a fundamental web brick into a function like this, then misting the windows with useState and destructuring, will boggle your less imaginative colleagues, and cut them off from a world of HTML goodness. 100 votes for this answer makes me think I'm in the wrong group of penguins. – bbsimonbb Nov 22 '21 at 16:40

score 65 · Answer 2 · edited Apr 08 '22 at 08:18

65

This is how i'm using right now:

const [inputValue, setInputValue] = React.useState("");

const onChangeHandler = event => {
   setInputValue(event.target.value);
};

<input
   type="text"
   name="name"
   onChange={onChangeHandler}
   value={inputValue}
/>

edited Apr 08 '22 at 08:18

Kirill Rakhman

42,195
18
124
148

answered Oct 03 '19 at 00:45

ncesar

1,592
2
15
34

3

Was going to comment this. This is the simplest way I feel. Also, this is how Dan Abramov demonstrated it when introducing hooks here: https://www.youtube.com/watch?v=dpw9EHDh2bM @ 25:25 – I_am_learning_now Jul 19 '20 at 00:02
It's very simple and organic way to understand. Thanks. – marcode_ely Aug 17 '20 at 05:49
2

You should wrap `onChangeHandler` with `useCallback` though. – Andreas Linnert Oct 10 '20 at 12:38
1

why @AndreasLinnert? – ncesar Oct 18 '20 at 01:07
1

@ncesar Okay, update on this: It seems it's not that simple. Just calling `useCallback()` costs more performance than it saves in this case. It's only useful in conjunction with child components that are wrapped in `React.memo()`. – Andreas Linnert Nov 05 '20 at 21:26

score 41 · Answer 3 · answered Aug 04 '19 at 01:20

Yes you can handle react hooks with useState()

import React, {useState} from 'react'

export default () => {
    const [fName, setfName] = useState('');
    const [lName, setlName] = useState('');
    const [phone, setPhone] = useState('');
    const [email, setEmail] = useState('');

const submitValue = () => {
    const frmdetails = {
        'First Name' : fName,
        'Last Name' : lName,
        'Phone' : phone,
        'Email' : email
    }
    console.log(frmdetails);
}

return(
    <>
    <hr/>
    <input type="text" placeholder="First Name" onChange={e => setfName(e.target.value)} />
    <input type="text" placeholder="Last Name" onChange={e => setlName(e.target.value)} />
    <input type="text" placeholder="Phone" onChange={e => setPhone(e.target.value)} />
    <input type="text" placeholder="Email" onChange={e => setEmail(e.target.value)} />
    <button onClick={submitValue}>Submit</button>
    </>
    )
}

score 4 · Answer 4 · answered Apr 19 '19 at 09:33

Here's how I do it (assuming your inputs must be inside a form):

I have a BasicForm component that I use.

It stores all the inputs state into an object into a single useState() call.

It passes via useContext() the inputs state along with an onChange() function and a function setInputInitialState() for the inputs to set their initial state when they are first mounted. It also passes onFocus, onBlur, and it has functions to validate fields which I'm not showing here to simplify the code.

This way I can easily create a form with as many inputs as I want, like:

<BasicForm
      isSubmitting={props.isSubmitting}
      submitAction={ (formState) =>
        props.doSignIn(formState) }
    >
      <TextInput
        type='email'
        label='Email'
        name='email'
        placeholder='Enter email...'
        required
      />
      <TextInput
        type='password'
        label='Password'
        name='password'
        placeholder='Enter password...'
        min={6}
        max={12}
        required
      />
      <SubmitButton
        label='Login'
      />
    </BasicForm>

BasicForm.js

import FormContext from './Parts/FormContext';

function BasicForm(props) {

  const [inputs, setInputs] = useState({});

  function onChange(event) {
    const newValue = event.target.value;
    const inputName = event.target.name;
    setInputs((prevState)=> {
      return({
        ...prevState,
        [inputName]: {
          ...prevState[inputName],
          value: newValue,
          dirty: true
        }
      });
    });
  }

  function setInputInitialState(
    inputName,
    label='This field ',
    type,
    initialValue = '',
    min = false,
    max = false,
    required = false) {

    const INITIAL_INPUT_STATE = {
      label: label,
      type: type,
      onFocus: false,
      touched: false,
      dirty: false,
      valid: false,
      invalid: false,
      invalidMsg: null,
      value: initialValue,
      min: min,
      max: max,
      required: required
    };

    setInputs((prevState) => {
      if (inputName in prevState) {
        return prevState;
      }
      return({
        ...prevState,
        [inputName]: INITIAL_INPUT_STATE
      });
    });

  }

return(
    <FormContext.Provider value={{
      onChange: onChange,
      inputs: inputs,
      setInputInitialState: setInputInitialState,
    }}>
      <form onSubmit={onSubmit} method='POST' noValidate>
        {props.children}
      </form>
    </FormContext.Provider>
  );
}

TextInput.js

The inputse use the useEffect() hook to set their initial state when they're mounted.

function TextInput(props) {

  const formContext = useContext(FormContext);

  useEffect(() => {
    console.log('TextInput useEffect...');
    formContext.setInputInitialState(
      props.name,
      props.label,
      props.type,
      props.initialValue,
      props.min,
      props.max,
      props.required
    );
  },[]);

  return(
      <input
        type={props.type}
        id={props.name}
        name={props.name}
        placeholder={props.placeholder}
        value={([props.name] in formContext.inputs) ?
                  formContext.inputs[props.name].value
                : props.initialValue || ''}
        onChange={formContext.onChange}
        onFocus={formContext.onFocus}
        onBlur={formContext.onBlur}
      >
      </input>
      </div>
      {([props.name] in formContext.inputs) ?
          formContext.inputs[props.name].invalidMsg && <div><span> {formContext.inputs[props.name].invalidMsg}</span></div>
        : null}
    </div>
  );

...
}

score 3 · Answer 5 · edited Sep 23 '20 at 12:09

function App(){
    const [name, setName] = useState("");
    const [istrue, Setistrue] = useState(false);
    const [lastname,setLastname]=useState("");
    
    function handleclick(){
       Setistrue(true);
    }
    
    return(
        <div>
            {istrue ? <div> <h1>{name} {lastname}</h1> </div> : 
            <div>
                <input type="text" placeholder="firstname" name="name" onChange={e =>setName(e.target.value)}/>
                <input type="text" placeholder="lastname" name="lastname" onChange={e =>setLastname(e.target.value)}/>
               <button  type="submit" onClick={handleclick}>submit</button>
            </div>}
        </div>
    )
    
    }

}

Nacho Coloma · Answer 6 · 2022-03-06T04:55:04.187

1

You may want to consider a form library like Formik

edited Mar 06 '22 at 04:55

answered Jun 28 '20 at 13:43

Nacho Coloma

7,070
2
40
43

It is exactly what is mentioned in React Docs: https://reactjs.org/docs/forms.html#fully-fledged-solutions – Laiacy Feb 16 '22 at 15:39
I was about to suggest the same.. why downvotes for this answer? – Mohamed Iqzas Apr 19 '22 at 04:46

score 0 · Answer 7 · answered Mar 08 '23 at 21:59

Thanks your answers and explanations from above: I implement these using Flask and React Hook with three button (start search data from server, update ag-grid table and cell data, and Save data to server) with Ag-Grid. I put in the version 106. https://github.com/peterhchen/900_ReactJS_Flask_FullStack

Handle an input with React hooks

7 Answers7

Linked