CODEWITHSUNDEEP
javascriptreactjsreact-nativewebfrontend
Kenny Quach
Kenny Quach

Reputation: 125

Error when I was trying to render a map of items

I am trying to figure out where my error is in my react js page

I have tried different things like changing it into a state component, return and render statements, etc. But its still giving me

"TypeError: Cannot read property 'map' of undefined Recipes src/components/Recipes.js:4 1 | import React from "react"; 2 | 3 | const Recipes = (props) => ( 4 | 5 | { props.recipes.map((recipe)=> { 6 | return ( 7 | View compiled"

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import InputForm from "./components/InputForm";
import Recipes from "./components/Recipes"

const API_KEY= "mykey";

class App extends Component {

  state= {
    recipes: []
  }

  getRecipe  = async (e) => {
  e.preventDefault();
  const recipeName = e.target.elements.recipename.value;
  const api_call = await fetch(`https://www.food2fork.com/api/search?key=${API_KEY}&q=${recipeName}&page=2`)

  const data = await api_call.json();
  this.setState({ recipes: data.recipes });
}
  render() {
    return (
      <div className="App">
        <header className="App-header">
          React Cookbook
        </header>
        <InputForm getRecipe={this.getRecipe} />
       <Recipes recipes={this.state.recipes} />
      </div>
    );
  }
}

export default App;

Recipes.js

import React from "react";

const Recipes = (props) => (
    <div>
     { props.recipes.map((recipe)=> {
        return (
        <div key={recipe.recipe_id }>
            <img src={recipe.image_url} alt={recipe.title}/>
            <h3>{ recipe.title }</h3>
         </div>
            )
        })}
    </div>
)

export default Recipes;

Upvotes: 0

Views: 376

Answers (1)

Andy
Andy

Reputation: 63550

As Andrew notes in the comments, it sounds like the response from the server is undefined, and that's what is getting added to the recipes state object. You can check for this in the console. Are your API key and recipe name valid, for example? Are you accessing the correct part of the returned data?

As an aside, recipes in state is empty on the first render. You need to check for that possibility in your code. Here I've simply returned an empty div, but you could add a loading spinner or something there instead to provide useful feedback to the user.

render() {

  const { recipes } = this.state;

  if (!recipes.length) return <div />;

  return (
    <div className="App">
      <header className="App-header">
        React Cookbook
      </header>
      <InputForm getRecipe={this.getRecipe} />
      <Recipes recipes={recipes} />
    </div>
  );

}

Upvotes: 0

Related Questions