undefined is not an object (this.props.navigation.getParam)

Question

FoodCreate.js

export class FoodCreate extends Component {
  state = {
    food: null,
    foodList: [],
  };

  submitFood = (food) => {
    this.setState({
      foodList: [
        ...this.state.foodList,
        {
          key: Math.random(),
          name: food,
        },
      ],
    });
    this.props.navigation.navigate("FoodList", {
      foodList: this.state.foodList,
      deleteFood: this.deleteFood,
    });
  };

  deleteFood = (key) => {
    this.setState({
      foodList: [...this.state.foodList.filter((item) => item.key != key)],
    });
  };

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon
                name="arrow-back"
                onPress={() => this.props.navigation.goBack()}
                style={{ fontSize: 25, color: "red" }}
              />
            </Button>
          </Left>
          <Body>
            <Title>Add Food</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon
                name="checkmark"
                style={{ fontSize: 25, color: "red" }}
                onPress={() => {
                  this.submitFood(this.state.food);
                }}
              />
            </Button>
          </Right>
        </Header>
        <View style={{ alignItems: "center", top: hp("3%") }}>
          <TextInput
            placeholder="Food Name"
            placeholderTextColor="white"
            style={styles.inptFood}
            value={this.state.food}
            onChangeText={(food) => this.setState({ food })}
          />
        </View>
     </Container>
    );
  }
}

export default FoodCreate;

FoodList.js

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

  render() {
    return (
      <Button onPress={() => this.props.navigation.navigate("FoodCreate")}>
           Press to insert food
      </Button>
      <FlatList
        data={this.props.navigation.getParam("foodList")} <-------
        keyExtractor={(item, index) => item.key.toString()}
        renderItem={(data) => <ListItem itemDivider title={data.item.name} />}
      />
    );
  }
}
export default FoodList;

Hey everyone, I'm building a Diet App, the food gets created in FoodCreate.js by typing a food and pressing the checkmark Icon, and this will create the food and display it in the FoodList.js, keep it in mind that the first Screen to be displayed is FoodList.js. When I run the code I get the following error: undefined is not an object (this.props.navigation.getParam)

Answer 1

try

   <FlatList
        data={props.route.params.foodList} <-------
        ...
        ...
      />

you must see document here: https://reactnavigation.org/docs/params/

undefined is not an object (this.props.navigation.getParam)

Question

1 answers

solution1
0 2021-04-15 15:57:39

undefined is not an object (this.props.navigation.getParam)

Question

1 answers

solution1 0 2021-04-15 15:57:39

solution1
0 2021-04-15 15:57:39