React Js : Handle Nested Element In State

Question

I have below Code :-

import React,{useState} from 'react'
const iState ={
    Name : '',
    Email :'',
    Salary :0,
    Error:{
        EName:'*',
        EEmail:'*',
        ESalary:'*'
    }

}
function ReactForm() {
    
const [state, setstate] = useState(iState);
    function validationHandler(e)
    {
        console.log(e.target.name);
        switch (e.target.name) {
            
            case 'txtName':
                if(e.target.value=='')
                {
                    setstate({...state.Error, EName:'Value Cannot be blank'})
                }
                setstate({...state, Name:e.target.value})
                break;
                case 'txtEmail':
                setstate({...state, Email:e.target.value})
                break;
                case 'txtSalary':
                setstate({...state, Salary:e.target.value})
                break;
            default:
                break;
        }
        
        console.log(state);
    }

    return (
        <div>
            Name : <input name="txtName" type="text" onChange={(e)=>validationHandler(e)}></input>
            <label> {this.state.Error.EName==undefined ? '*':this.state.Error.EName} </label>
            <br></br>            
            Email : <input name="txtEmail" type="text" onChange={(e)=>validationHandler(e)}></input>
            <br></br>            
            Salary : <input name="txtSalary" type="text" onChange={(e)=>validationHandler(e)}></input>
            <br></br>
            <button onClick={validationHandler}>Validate Us</button>
        </div>
    )
}

export default ReactForm

I have nested Error element for validation in state -

Error:{
        EName:'*',
        EEmail:'*',
        ESalary:'*'
    }

I am trying to bind it to react element as -

Name : <input name="txtName" type="text" onChange={(e)=>validationHandler(e)}></input>
            <label> {this.state.Error.EName==undefined ? '*':this.state.Error.EName} </label>

But Getting An Error -

Yatrix · Accepted Answer · 2021-06-02 12:08:11Z

2

You don't need to use this to access state in functional components. Just do, state.Error.EName. this is only necessary in class components.

answered Jun 2, 2021 at 12:08

Yatrix

13.9k17 gold badges57 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

C Sharper Over a year ago

Thanks. This was helpful. Understood my mistake.

Yatrix Over a year ago

@CSharper yw. Happens to the best of us. ;)

Tomeu Cabot · Accepted Answer · 2021-06-02 12:11:36Z

1

You are using functional component and your state is not binded to the class component so you don't need to access it through this.

return (
  <div>
      Name : <input name="txtName" type="text" onChange={(e)=>validationHandler(e)}></input>
      <label> {state.Error.EName==undefined ? '*': state.Error.EName} </label>
      <br></br>            
      Email : <input name="txtEmail" type="text" onChange={(e)=>validationHandler(e)}></input>
      <br></br>            
      Salary : <input name="txtSalary" type="text" onChange={(e)=>validationHandler(e)}></input>
      <br></br>
      <button onClick={validationHandler}>Validate Us</button>
  </div>
)

answered Jun 2, 2021 at 12:11

Tomeu Cabot

4232 silver badges8 bronze badges

Collectives™ on Stack Overflow

React Js : Handle Nested Element In State

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related