Immutable Updates to nested data with setState in React

functional-setstate.js

// Functional setState (Recommended)
this.setState(prevState => {
  const newState = {
    ...prevState.data,
    transactions: [...data, prevState.data.transactions]
  }
  return { data: newState }
})

plain-setstate.js

// Just plain setState (not recommended)
this.setState({
  data: {
    ...this.state.data,
    transactions: [...this.state.data.transactions, ...data]
  }
})

state-example.js

// what your state might look like while doing deep updates
// Keep state shallow! Don't nest beyond two levels

state = {
  data: {
    transactions: []
  },
  form: {
    note: '',
    deposit: App.DEFAULT_DEPOSIT_AMOUNT,
    spend: App.DEFAULT_EXPENSE_AMOUNT,
    date: moment(),
    isValid: false
  },
  ui: {
    isActive: false,
    message: '',
    loading: true
  }
}