CODEWITHSUNDEEP
javascriptreactjsmaterial-uireact-hookstextfield
Subhojit
Subhojit

Reputation: 1541

React state hook issue

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. enter image description here

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

Answers (3)

Gabriele Petrioli
Gabriele Petrioli

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

devserkan
devserkan

Reputation: 17638

You are setting your state in a wrong way. Two issues here:

setDataAction(prevState => {
 prevState.errorNameText = '';
});

  1. For an arrow function if you want to return an object implicitly, you need to wrap it with ()

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

D10S
D10S

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

Related Questions