mercredi 6 novembre 2019

Checkbox with true or false value throwing error in React Class Component?

I have two checkboxes that were working previously but are now throwing an error. These checkboxes simply return a true or false in the form, which is submitted to the Firestore backend. These were working fine recently until so other changes were make.

The error in question is TypeError: Cannot create property 'cash' on boolean 'false' This is triggered whenever the checkbox is clicked. I am using a changeStoreData() action to update the FireStore, this action is called all throughout my app in order to update the users information

This is my state setup

constructor(props) {
    super(props);
    this.state = {
      currency: "USD",
      tax_rate: "8.00",
      prices_include_tax: false,
      payment_types: {
        cash: false,
        credit: false
      }
    };
  }

Theses are the buttons in question

handleCash = () => {
    this.setState(state => {
      var newData = state.payment_types;
      newData.cash = !state.payment_types.cash;
      return {
        payment_types: newData
      };
    });
  };
  handleCredit = () => {
    this.setState(state => {
      var newData = state.payment_types;
      newData.credit = !state.payment_types.credit;
      return {
        payment_types: newData
      };
    });
  };

This is the onSubmit function calling the changeStoreData() function

handlePaymentInfoSub = e => {
    e.preventDefault();
    this.setState(state => {
      changeStoreData(state);
  // I know this needs to be more explicit 
 // Other places in my app this is called changeStoreData({DBvalue: 
 // stateValue}) but I am not sure how to do this with nested values
      return state;
    });
  };

and finally here is the changeStore function itself from the actions file

export function changeStoreData(data) {
  let currentState = store.getState();
  let id = currentState.currentStore.id;
  console.log(data);
  firestoreDb
    .collection("users")
    .doc(currentState.uid)
    .collection("stores")
    .doc(id)
    .update(data)
    .then(
      store.dispatch({
        type: UPDATE_STORE_DATA,
        data: data
      })
    )
    .catch(err => {
      console.log(err);
    });
}

The error given is

TypeError: Cannot create property 'cash' on boolean 'false'



Aucun commentaire:

Enregistrer un commentaire