0

I am currently trying to display my information flask API which is returning json data.

When running the following code I get the error:

Line 37:61: 'recipe' is not defined no-undef
Line 41:24: 'recipe' is not defined no-undef
Line 42:24: 'recipe' is not defined no-undef

Here is the data it is getting: https://pastebin.com/uYUuRY6U

here is the code:

import React, { Component } from 'react';
import Axios from 'axios';
import NavBar from '../header-footer/nav-bar'
import Featured from './FeaturedMealplan'

export default class MealPlanDetail extends Component {
  constructor(props) {
      super(props);

      this.state = {
          currentId: this.props.match.params.slug,
          mealplanItem: {}, // Full mealplan
          mealplanRecipes: [], // Contains recipe names and difficulty.
          mealplanIngredients: [], // Ingredents of the recipe
      }
  }

  getMealplanItem() {
    Axios.get(`http://localhost:5000/get-mealplan/${this.state.currentId}`
    ).then(response => {
        // console.log("response", response)
        this.setState({
            mealplanItem: response.data.mealplan,
            mealplanRecipes: this.state.mealplanRecipes.concat(response.data.mealplan["recipes"]),
            mealplanIngredients: this.state.mealplanIngredients.concat(response.data.mealplan["recipe_info"])
        })
    }).catch(error => {
        console.log("mealplan-detail GET Error ", error)
    })
  }

  componentDidMount() {
      this.getMealplanItem();
  }

  render() {
      const renderRecipes = this.state.mealplanRecipes.map((recipe, idx => {
          return (
              <div key={idx}>
                  <h1>
                      {recipe.recipe_name}
                      {recipe.recipe_dificulty}
                  </h1>
              </div>
          )
      }))
      return (
          <div>
              <NavBar/>
              <Featured/>
              {renderRecipes}
          </div>
      )
  }
}

1 Answer 1

2

Your bracketing is wrong, the parameters of the map function should be in their own parentheses. So change it to this:

  const renderRecipes = this.state.mealplanRecipes.map((recipe, idx) => {
      return (
          <div key={idx}>
              <h1>
                  {recipe.recipe_name}
                  {recipe.recipe_dificulty}
              </h1>
          </div>
      )
  })

Not the answer you're looking for? Browse other questions tagged or ask your own question.