I am using React. This is my state

state = {
customerData: {
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: 'GMT+5:30',
      status: false
    }
}

There is an edit functionality where the customerData object gets populated on click of edit button. I am showing this data in a modal.

Now in the modal, when I click the submit button, the modal should hide and the data populated in the customerData object should be empty. I can do it like this:

this.setState({
customerData: {
      ...this.state.customerData
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: '',
      status: false
    }
}
})

I am wondering is there any one line way in ES6 to make the customerData Object empty. Because, if there are too many fields, it will be difficult.

I am using React. This is my state

state = {
customerData: {
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: 'GMT+5:30',
      status: false
    }
}

There is an edit functionality where the customerData object gets populated on click of edit button. I am showing this data in a modal.

Now in the modal, when I click the submit button, the modal should hide and the data populated in the customerData object should be empty. I can do it like this:

this.setState({
customerData: {
      ...this.state.customerData
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: '',
      status: false
    }
}
})

I am wondering is there any one line way in ES6 to make the customerData Object empty. Because, if there are too many fields, it will be difficult.

• javascript
• reactjs
• ecmascript-6

5 Answers 5

There are two easy options here:

Create a default object

Above your ponent you can create the 'empty' value for your state. For example:

const emptyCustomerData = {
  id: '',
  name: '',
  type: '',
  place: '',
  country: '',
  timezone: '',
  status: false,
}

When you want to clear your state object, now you just call:

this.setState({
  customerData: emptyCustomerData,
})

Allow all the values of customerData to be nullable

You could simply set customerData to an empty object:

this.setState({
  customerData: {},
})

Doing this means that before using any of the properties in your code, you need to check for undefined:

// This sets myVal to customerData.name, or if name is undefined, to an empty string
const myVal = this.state.customerData.name || ''

You can set a variable like initialState:

const initialState = {
  customerData: {
      id: '',
      name: '',
      type: '',
      place: '',
      country: '',
      timezone: 'GMT+5:30',
      status: false
  }
}

And before you hide the modal, do a:

this.setState(initialState)

Assuming you want to preserve the customerData keys, for your use case it may be sufficient to set everything to null which would simplify the reset:

this.setState(customerData: Object.assign(...Object.keys(this.state.customerData).map(k => ({[k]: null}))))

https://jsfiddle/0ymx7fsq/

Alternatively, since you're using class ponents you can also save the initial state in a constructor as well:

constructor(props) {
    super(props)
    this.state = initialState;
}
...
reset() {
    this.setState({ customerData : initialState.customerData });
}
...

You can use reduce in order not to rely on params count and number. It should looks like this

const data = {
  id: '1',
  name: '2',
  type: '3',
  place: '4',
  country: '5',
  timezone: '6',
  status: true
}

function getDefaultObject(obj) {
  const defaultValues = {
    'string': '',
    'boolean': false
  }

  return Object.keys(obj).reduce((acc, rec, index) => {
    return { ...acc, [rec]: defaultValues[typeof obj[rec]]}
  }, {})
}

console.log(getDefaultObject(data))

Just facing your problem today and i solved it with this code

const handleResetState = () => {
    const {customerData} = this.state
    let emptyState = {};
    for (const key in customerData){
        emptyState = {...emptyState, [key] : ""}
    }
    //i think you will more need the second option, so dont use first option
    //normal change (first option)
    this.setState({customerData: emptyState});
    //in case if your key need to have special initial value that are not empty string (second option)
    this.setState({customerData: {...emptyState, status: false} })
}