Update Nested state in reactjs

Question

I have a component with state like. I am creating dynamic form, all is working fine but I want to reset the form value once submit button clicked. for that i have a helper function called resetForm() , but unfortunately the logic is not working. can anybody help with this..

state = {
    expenseForm: {
        date: {
            elementType: 'input',
            elementConfig: {
                type: 'date',
                placeholder: 'Enter Date..'
            },
            value: '',
            validation: {
                required: true,
                isDate: true
            },
            valid: false,
            touched: false
        },
        category: {
            elementType: 'select',
            elementConfig: {
                options: !this.props.loading ? transformCategory(this.props.categories): null
            },
            value: transformCategory(this.props.categories)[0].value,
            validation: {
                required: true,
                minLength: 4
            },
            valid: true,
            touched: false
        },
        description: {
            elementType: 'input',
            elementConfig: {
                type: 'text',
                placeholder: 'Enter Description..'
            },
            value: '',
            validation: {
                required: true,
                minLength: 6
            },
            valid: false,
            touched: false
        },
        amount: {
            elementType: 'input',
            elementConfig: {
                type: 'number',
                placeholder: 'Enter amount..'
            },
            value: '',
            validation: {
                required: true,
                minLength: 1
            },
            valid: false,
            touched: false
        }
    },
    formIsValid: false
}

React Component code link

Could you include your component and the resetForm method in the question? — Tholle
– Tholle, Commented Aug 12, 2018 at 12:46
And tell us what the actual issue is. Saying that it's "not working" doesn't help us, tell us the expected behaviour, the incorrect behaviour you're currently getting, any error messages (e.g. console errors) that you're getting, and so on. — Jayce444
– Jayce444, Commented Aug 12, 2018 at 12:51
hey, thanks for your reply, I have given the link to the component. please check once — Rahul Raj Sonu
– Rahul Raj Sonu, Commented Aug 12, 2018 at 13:00

Tholle · Accepted Answer · 2018-08-12 12:52:08Z

You could have a function getInitialState that returns an object you can use as initial state for your component. When you need to reset the component state, you can use setState with the result of getInitialState again.

Example

function getInitialState() {
  return {
    email: "",
    password: ""
  };
}

class App extends React.Component {
  state = getInitialState();

  onChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  resetForm = () => {
    this.setState(getInitialState());
  };

  render() {
    const { email, password } = this.state;

    return (
      <div>
        <div>
          Email: <input name="email" value={email} onChange={this.onChange} />
        </div>
        <div>
          Password: <input name="password" type="password" value={password} onChange={this.onChange} />
        </div>
        <button onClick={this.resetForm}> Reset </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Collectives™ on Stack Overflow

Update Nested state in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related