CODEWITHSUNDEEP
javascriptreactjsreact-nativerendering
developer
developer

Reputation: 53

re-render in react native- issue

I have this code in react native, if user click yes to delete the item from list. but the item still in the bag until refresh it ! how can I do re-render when clicked delete? 

  const bagProducts = this.props.allProducts;
    const productId = this.props.deleteProductAction(this.props.id).id;
    var result = bagProducts.filter(x => {
      return x.id == productId;
    })[0];

  <TouchableOpacity
            style={styles.bagItemButtons}
            onPress={() => {
              Alert.alert(
                "Alert",
                "Are you sure wnat do delete ?",
                [
                  { text: "NO", onPress: () => console.log("Cancel pressed") },
                  {
                    text: "Yes",
                    onPress: () => {
                      bagProducts.splice(result, 1);
                    }
                  }
                ],
                { cancelable: true }
              );
            }}
          >
            <Text style={styles.bagItemButtonText}>{t("delete")}</Text>
          </TouchableOpacity>

Upvotes: 0

Views: 346

Answers (4)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

I don't know how you are rendering the bagProducts.

But if you want to re-render the bags,you need to update the state.

Assuming state object.

add event handler to update bags, 

updateBags=()=>{

    bagProducts.splice(result, 1);

    this.setState(({bagProducts}));
}

call updateBags on onPress

onPress: this.updateBags //onPress should be like this.call updateBags

Upvotes: 0

yogeshwar nair
yogeshwar nair

Reputation: 813

Put your list Item in State and update the state it will render the list

Upvotes: 4

Mael Chemla
Mael Chemla

Reputation: 148

You can use 

        this.forceUpdate()

method at the end of your delete function.

Upvotes: -1

AlexMcG
AlexMcG

Reputation: 175

Your bagProducts should be held in the local state and then you run a setState to modify bagProducts. That will cause a re-render.

Upvotes: 0

Related Questions