if condition doesnt return wanted results

Question

im trying to check if my cart is empty or not , if its not empty then it returns this view and it s working well :

and if it is empty it should return a text that has "empty is cart" but its not working :

here is my code :

{

                        this.state.dataCart.map((item, i) => {


                            if (this.state.dataCart.length != 0) {
                                return (

                                    <View style={{ flex: 1, }} key={i}>

                                        <View style={{ width: width - 20, margin: 10, backgroundColor: 'transparent', flexDirection: 'row', borderBottomWidth: 2, borderColor: "#cccccc", paddingBottom: 10 }}>
                                            <Image resizeMode={"contain"} style={{ width: width / 3, height: width / 3 }} source={require("../assets/Tacos-M.png")} />
                                            <View style={{ flex: 1, backgroundColor: 'transparent', padding: 10, justifyContent: "space-between" }}>
                                                <View>
                                                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                                        <Text style={{ fontWeight: "bold", fontSize: 20 }}>Tacos {item.Viande}</Text>
                                                        <TouchableOpacity onPress={() => this.removeItem(i)}>
                                                            <Ionicons name="close-sharp" size={30} color={'#D05A0B'} />
                                                        </TouchableOpacity>
                                                    </View>

                                                    <Text>Sauce:{item.Sauce}</Text>
                                                    <Text>Taille:{item.taille}</Text>
                                                    <Text>Extra:{item.Extra}</Text>
                                                    <Text>Boissons:{item.Boisson}</Text>
                                                    <Text>Supplements:{item.Supplements}</Text>
                                                </View>
                                                <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                                    <Text style={{ fontWeight: 'bold', fontSize: 20 }}>{item.Price * item.Quantity} DT</Text>
                                                    <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                                        <TouchableOpacity onPress={() => this.onChangeQual(i, false)}>
                                                            <Ionicons name="remove-circle" size={30} color={'#D05A0B'} />
                                                        </TouchableOpacity>
                                                        <Text style={{ paddingHorizontal: 8, fontWeight: 'bold' }}>{item.Quantity}</Text>
                                                        <TouchableOpacity onPress={() => this.onChangeQual(i, true)}>
                                                            <Ionicons name="add-circle" size={30} color={'#D05A0B'} />
                                                        </TouchableOpacity>
                                                    </View>
                                                </View>
                                            </View>
                                        </View>

                                    </View>


                                )
                            } else {


                                return (

                                    <View style={{ flex: 1, }}>

                                        <Text>Cart is empty !</Text>
                                    </View>


                                )


                            }
                          

                        })
                    }

here is my log console :

is there any solution ?

Answer 1

If-else statements do not work inside JSX. So, use ternary operator instead.

this.state.dataCart.map((item, i) =>
  this.state.dataCart.length != 0 ? (
    <View style={{ flex: 1 }} key={i}>
      <View
        style={{
          width: width - 20,
          margin: 10,
          backgroundColor: "transparent",
          flexDirection: "row",
          borderBottomWidth: 2,
          borderColor: "#cccccc",
          paddingBottom: 10,
        }}
      >
        <Image
          resizeMode={"contain"}
          style={{ width: width / 3, height: width / 3 }}
          source={require("../assets/Tacos-M.png")}
        />
        <View
          style={{
            flex: 1,
            backgroundColor: "transparent",
            padding: 10,
            justifyContent: "space-between",
          }}
        >
          <View>
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
              }}
            >
              <Text style={{ fontWeight: "bold", fontSize: 20 }}>
                Tacos {item.Viande}
              </Text>
              <TouchableOpacity onPress={() => this.removeItem(i)}>
                <Ionicons name="close-sharp" size={30} color={"#D05A0B"} />
              </TouchableOpacity>
            </View>

            <Text>Sauce:{item.Sauce}</Text>
            <Text>Taille:{item.taille}</Text>
            <Text>Extra:{item.Extra}</Text>
            <Text>Boissons:{item.Boisson}</Text>
            <Text>Supplements:{item.Supplements}</Text>
          </View>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "space-between",
            }}
          >
            <Text style={{ fontWeight: "bold", fontSize: 20 }}>
              {item.Price * item.Quantity} DT
            </Text>
            <View style={{ flexDirection: "row", alignItems: "center" }}>
              <TouchableOpacity onPress={() => this.onChangeQual(i, false)}>
                <Ionicons name="remove-circle" size={30} color={"#D05A0B"} />
              </TouchableOpacity>
              <Text style={{ paddingHorizontal: 8, fontWeight: "bold" }}>
                {item.Quantity}
              </Text>
              <TouchableOpacity onPress={() => this.onChangeQual(i, true)}>
                <Ionicons name="add-circle" size={30} color={"#D05A0B"} />
              </TouchableOpacity>
            </View>
          </View>
        </View>
      </View>
    </View>
  ) : (
    <View style={{ flex: 1 }}>
      <Text>Cart is empty !</Text>
    </View>
  )
);