Cannot read property 'image_url' of undefined in React

Question

I am very new to react and I am trying to show data but I am getting the error

No Data is appear when i add some code about image_url, title,source_url etc....

TypeError: Cannot read property 'image_url' of undefined

import React, { Component } from 'react'

export default class Recipe extends Component {
    render() {
        const {
            image_url,
            title,
            source_url,
            publisher,
            recipe_id
        } = this.props.recipe;

        return (
            <React.Fragment>
                <h1>Recipe</h1>
                <div className="col-10 mx-auto col-md-6 col-lg-4">
                    <div className="card">
                        <img src={image_url} className="img-card-top" style={{height:"14rem"}} alt="recipe" />
                        <div className="card-body text-capitalize">
                            <h5>{title}</h5>
                            <h6 className="text-warning text-slanted">
                                provided by {publisher}
                            </h6>
                        </div>
                        <div className="card-footer">
                            <button type="button" className="btn btn-outline-primary">Details</button>
                            <a href="{source_url}" className="btn btn-outline-dark mx-2">Recipe url</a>
                        </div>
                    </div>
                </div>
            </React.Fragment>
        );
    }
}

In ReactList.js,

<div className="row">
             {recipes.map (recipe => {
                return <Recipe key={recipe.recipe_id} recipe={recipe}
                  />;
             })}
           </div>
       </div>
   <Recipe />
</React.Fragment>

Try console.log(this.props.recipe) before the return statement to see what the recipe object contains. It's likely that source_url is undefined. — Shamar Yarde
– Shamar Yarde, Commented Nov 2, 2019 at 22:30
Can you post the code where you set the props for the Recipe component? — Jon Warren
– Jon Warren, Commented Nov 2, 2019 at 22:51

Saung Hnin Oo · Accepted Answer · 2019-11-03 11:55:26Z

2

error occur as you use two time <Recipe /> in RecipeList.js,

Removed one <Recipe />, error will solve

Change

        <div className="row">
             {recipes.map (recipe => {
                return <Recipe key={recipe.recipe_id} recipe={recipe}
                  />;
             })}
           </div>
       </div>
   <Recipe />
</React.Fragment>

To

        <div className="row">
             {recipes.map (recipe => {
                return <Recipe key={recipe.recipe_id} recipe={recipe}
                  />;
             })}
           </div>
       </div>
</React.Fragment>

answered Nov 3, 2019 at 11:55

Saung Hnin Oo

362 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Cannot read property 'image_url' of undefined in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related