Reputation: 1541
I'm trying to use the state hook to make the onChange work properly with material-ui to handle the error texts. But getting one issue. I have attached the screen of the error coming in the console.
Here's my code:
import React, { Component, useState } from 'react';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
export const CreateForm = (props) => {
const { containerClass } = props;
let [dataAction, setDataAction] = useState({ errorNameText: 'Enter product name!' });
let errorNameText = 'Enter the name!';
const handleNameChange = (event) => {
const name = event.target.value;
if(name && name !== '') {
setDataAction(prevState => {
prevState.errorNameText = '';
})
}
}
return(
<div className={containerClass}>
<div>
<TextField
className="product_nameField"
floatingLabelText="Product Name"
errorText={dataAction.errorNameText}
onChange={handleNameChange}
/>
</div>
<br/>
<div>
<TextField
className="product_priceField"
floatingLabelText="Product Price"
/>
</div>
<br/>
<div>
<TextField
className="product_infoField"
floatingLabelText="Product Info"
/>
</div>
<br/>
<div>
<RaisedButton label="Submit" primary={true} />
</div>
</div>
);
}
I guess I'm missing something vital over here on making use of the state hook in the proper way. Any help would be appreciated.
Upvotes: 1
Views: 64
Reputation: 196296
The setDataAction
will set the value of the state to the value passed or the returned value if you pass a function
You function just mutates the previous state and then returns nothing. So the next render the dataAction
will be undefined and you will try to do dataAction.errorNameText
and crash.
Use
// no point to use this syntax since the new state
// does not depend on the previous state
setDataAction(prevState => ({
errorNameText: '';
}))
or
// use this syntax for your use case
setDataAction({
errorNameText: '';
})
Upvotes: 2
Reputation: 17638
You are setting your state in a wrong way. Two issues here:
setDataAction(prevState => {
prevState.errorNameText = '';
});
For an arrow function if you want to return an object implicitly, you need to wrap it with ()
You are mutating your state. Do not set it like prevState.errorNameText = ''
Here is the right way:
setDataAction(prevState => ({
...prevState,
errorNameText: '';
}));
So, you should spread the current state and make the necessary changes. In your case, you don't have any other properties but this is the right way. Because, if you add another property to your state in the future and do not use spread syntax here, you'll lose all other properties in your state.
Upvotes: 3
Reputation: 1559
change
const handleNameChange = (event) => {
const name = event.target.value;
if(name && name !== '') {
setDataAction(prevState => {
prevState.errorNameText = '';
})
}
}
to
const handleNameChange = (event) => {
const name = event.target.value;
if(name && name !== '') {
setDataAction({ errorNameText: ''}) <------ CHANGED
}
}
Please let me know if it solved it then I will elaborate.
Upvotes: 2