I have a form that I need to get the information from all the inputs and save it in state.

What am I doing wrong?

const [name,setName] = useState("");

return (
  <div className="App">
    <div class="inputfield">
      <label>Campaign Name</label>
      <input type='text' required maxLength='20' onChange={setName()} className="input"/>
    </div>
  </div>
)

I have a form that I need to get the information from all the inputs and save it in state.

What am I doing wrong?

const [name,setName] = useState("");

return (
  <div className="App">
    <div class="inputfield">
      <label>Campaign Name</label>
      <input type='text' required maxLength='20' onChange={setName()} className="input"/>
    </div>
  </div>
)

• javascript
• reactjs
• react-hooks

Share Improve this question Follow edited Jan 28, 2022 at 3:46 Joundill 7,6401313 gold badges3838 silver badges5353 bronze badges asked Jan 27, 2022 at 19:23 AliveBBGAliveBBG 2111 silver badge22 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Here is an example of how I set state for input values.

Make sure to set this outside the ponent (before defining the ponent).

let initialValues = {
  city: ''
}

const [quote, setQuote] = useState(initialValues)

<input type="text"
  value={ quote.city || "" }
  name="city"
  onChange={ onChange } />

const onChange = (e) => {
  setQuote({...quote, [e.target.name]: e.target.value});
};

you can have as many key values inside the initialValues const. Make sure you define the name of the input along with the value pointing to the state object and an onChange event that handles the setting. Happy Coding!

To make a simple change with the code that you have, you can simply rewrite the onChange method for the input element.

onChange={(e) => setName(e.target.value)}

Based on the code that you have provided, it seems that you are not setting your state to anything on change. A good practice would be to establish a handler, that will be triggered when the input's value has been changed - this will set the respective value to your state.

Additionally, since you are effectively making this a controlled input, I would remend adding the state value as its value attribute. This way, you can handle it directly through the state (say if you wanted to have it reset).

const YourComponent = () => {
 const [name,setName] = useState("");
    
 const nameChangeHandler = (e) => {
    setName(e.target.value)
 };

 return (
 <div className="App">
    <div class="inputfield">
      <label>Campaign Name</label>
      <input type='text' required maxLength='20' onChange={nameChangeHandler} value={name} className="input"/>
   </div> 
 </div>  
};

For more information, you can also check the official documentation.

Short explain:

What you are doing wrong is onChange={setName()}. It must be onChange={(...) => setName(...)} or onChange={setName}.

Long explain:

When you write code as onChange={setName()}, it will running similar to 2 below lines of code:

const tempValue = setName() // this will run setName with no parameter, which makes name = undefined
                            // then save return data to tempValue = undefined
...onChange={tempValue}...  // or equal onChange={undefined}, which make no sense

The onChange here accept a function which accept event param, so you must write it like this:

function eventHandler(event) {...}
or
const eventHandler = event => ...
...onChange={eventHandler}...

More specific, in your case, it needs to be like this:

const eventHandler = event => setName(event.target.value)
...onChange={eventHandler}...
or
...onChange={event => setName(event.target.value)}...