CODEWITHSUNDEEP
javascriptreactjsreact-hooks
AliveBBG
AliveBBG

Reputation: 21

React saving inputs to state

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

Upvotes: 2

Views: 7685

Answers (4)

developedbygeo
developedbygeo

Reputation: 11

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 recommend 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.

Upvotes: 1

namgold
namgold

Reputation: 1070

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

Upvotes: 0

Tim Bogdanov
Tim Bogdanov

Reputation: 240

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

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

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!

Upvotes: 3

boc4life
boc4life

Reputation: 961

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

Upvotes: 1

Related Questions