Sum the total values of calories inserted in a Flatlist

DIET (screen)

export class Diet extends Component {
  constructor(props) {
    super(props);
this.state = {
foodList: [],
caloricTotSum: 0,
    };
  }

static getDerivedStateFromProps(props, state) {
    if (props.route.params?.food) {
      return { foodList: [...state.foodList, props.route.params.food] };
      getSum = () => {                                                  <-----------function
        const { calories } = this.state.foodList;
        const caloricSum = calories.reduce(function (a, b) {
          return a + b;
        }, 0);
        this.setState({
          caloricTotSum: caloricSum,
        });
      };
    }
    return null;
  }

    render() {
      return (
           <View>

              <AnimatedCircularProgress
                size={80}
                width={7}
                fill={this.state.caloricTotSum}
                tintColor="#F54141"
                onAnimationComplete={() =>
                  console.log("onAnimationComplete")
                }
                backgroundColor="#3d5875"
                backgroundWidth={2}
                style={{ right: wp("8%") }}
              >
                {(fill) => <Text>{this.state.caloricTotSum}</Text>}
              </AnimatedCircularProgress>
                  <List>
                    <FlatList
                      data={this.state.foodList}
                      keyExtractor={(item, index) => item.key.toString()}
                      renderItem={(data) => (
                        <ListItem>
                          <Button>
                            <Left>
                              <Text>{data.item.foodName}</Text>
                            </Left>
                            <Right>
                              <Text>{data.item.calories}</Text>
                              <Icon name="arrow-forward" />
                            </Right>
                          </Button>
                        </ListItem>
                      )}
                    />
                  </List>
                </View>

FOODCREATE (screen)

export class FoodCreate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      food: null,
      calories: null,
      foodList: [],
    };
  }

  submitFood = (food, calories) => {
    this.setState(
      {
        foodList: [
          ...this.state.foodList,
          {
            key: Math.random(),
            foodName: food,
            calories: calories,
          },
        ],
      },
      () => {
        this.props.navigation.navigate("Diet", {
          foodList: this.state.foodList,
        });
      }
    );
  };
render() {
    return (
      <Container>
         <TextInput
            placeholder="Food Name"
            placeholderTextColor="white"
            style={styles.inptFood}
            value={this.state.food}
            onChangeText={(food) => this.setState({ food })}
          />
         <TextInput
            placeholder="Calories"
            placeholderTextColor="white"
            style={styles.inptMacros}
            keyboardType="numeric"
            value={this.state.calories}
            maxLength={5}
            onChangeText={(calories) => this.setState({ calories })}
          />
          <Button transparent>
          <Icon
            name="checkmark"
            style={{ fontSize: 25, color: "red" }}
            onPress={() => {
              this.submitFood(this.state.food, this.state.calories);
            }}
          />
        </Button>

Hello everyone, I’m trying to make an app in which the user has to insert foodName and calories in the FoodCreate screen and once he taps the checkmark it will add the foodName and calories to the Flatlist in the Diet screen, once the user starts adding foods to the Flatlist there should be a sum of the calories of the food inserted and be represented in the AnimatedCircularPrgoress. The function I am using is represented in the static getDerivedStateFromProps, I can’t figure out what I’m doing wrong

Source: Ask Javascript Questions

LEAVE A COMMENT