CODEWITHSUNDEEP
javascriptreactjs
maudev
maudev

Reputation: 1101

How to setState of this nested object?

Hi Im having troubles setting the state when I press a button 'Send' on one email input.

I'm trying it avoiding mutation as React docs recommends.

My state properties are this:

state = {
    emailForm: {
      email: {
        elementType: 'email-invitation-input',
        elementConfig: {
          type: 'email',
          placeholder: 'Enter an email..',
        },
        value: '',
        valid: true,
        required: true
      }
    },
    requestStatus : false,
    validationMessage : null,
    formIsValid: false,
  }

So I tried three ways to set empty value to my email input trough the state but no one worked :(

First try: I used ES6 spread operator to change it value but it doesn't change the input value:

 this.setState({
   email: {
           ...this.state.emailForm.email,
           value: '',
           },
 });

 this.setState({
   email: Object.assign({}, this.state.emailForm.email, {
     value: '',
   }),
 });

Another try using immutability-helper package

import update from 'immutability-helper';
let newData = { email: {
   ...this.state.emailForm.email,
   value: '',
 }, };

 this.setState({
   email: update(this.state.newData, {
     value: {$set: newData},
   })
 });

Second try: I used Ramda.js but it neither works.

setObjectByPath(fieldPath, value) {
  this.setState({
    emailForm: R.set(R.lensPath(fieldPath), value, this.state.emailForm)
  })
}

setObjectByPath(this.state.emailForm.email,'');

Third try:

I used react-addons-update:

import update from 'react-addons-update';

this.setState({
  email: update(this.state.newData, {
    value: {$set: newData},
  })
 });

All tries does nothing or it creates a new email input with empty value below.

Thanks beforehand

Upvotes: 3

Views: 2493

Answers (1)

quirimmo
quirimmo

Reputation: 9988

this.setState(prevState => ({
  emailForm: {
    email: {
      ...prevState.emailForm.email,
      value: ''
    }
  }
}));

Upvotes: 6

Related Questions