1

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.

5 Answers 5

2

There are two easy options here:

Create a default object

Above your component 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 || ''
Sign up to request clarification or add additional context in comments.

1 Comment

this.state.customerData?.name
2

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)

Comments

0

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.net/0ymx7fsq/

Alternatively, since you're using class components 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 });
}
...

Comments

0

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))

Comments

0

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} })
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.