Reputation: 21
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
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
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
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
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