React Redux - Uncaught (in promise) TypeError: Cannot read property 'props' of undefined

Question

I'm new to React, please keep this in mind.

I have seen many people having issues with the binding of "this" keyword, I think I got it right, however I'm still getting the error "Cannot read property 'props' of undefined".

I'm doing something wrong with my React+Redux app but I can't figure out what.

Here's my code: Recipes_list.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import { getRecipe } from "../actions/index";

class RecipeList extends Component {
    constructor(props) {
        super(props);
        this.functionGetRecipe = this.functionGetRecipe.bind(this);
    }

    functionGetRecipe(recipe_id){
        this.props.getRecipe(recipe_id);
    }

    renderRecipes(recipeData) {     
        const publisher = recipeData.publisher;
        const recipe_id = recipeData.recipe_id;
        const title = recipeData.title;
        const source_url = recipeData.source_url;
        const image_url = recipeData.image_url;

        return (
            <tr onClick={this.props.functionGetRecipe(recipe_id)} key={recipe_id}>
                <td>{publisher}</td>
                <td>{title}</td>
                <td><a href={source_url}>View on original website</a></td>
                <td><img className="img-fluid" src={image_url} /></td>
            </tr>
        );
    }

    render() {
        if (!this.props.recipes) {
            return <div>Nothing to show yet</div>;
        }
        return (
            <table style={{width: "50%"}} className="table table-hover float-right">
                <thead>
                    <tr>
                        <th>Publisher</th>
                        <th>Title</th>
                        <th>Source</th>
                        <th>Image</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.recipes.map(this.renderRecipes)}
                </tbody>
            </table>    
        );
    }
}

function mapStateToProps(state){
    return { recipes: state.searchRecipes.recipes };
}

function mapDispachToProps(dispatch) {
    return bindActionCreators({ getRecipe }, dispatch);
}

export default connect(mapStateToProps, mapDispachToProps)(RecipeList);

When this Container/Component gets re-rendered with an array of values (this.props.recipes) Chrome's console logs the following error:

Uncaught (in promise) TypeError: Cannot read property 'props' of undefined
at renderRecipes (bundle.js:36675)
at Array.map (<anonymous>)
at RecipeList.render (bundle.js:36746)
at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (bundle.js:7779)
at ReactCompositeComponentWrapper._renderValidatedComponent (bundle.js:7799)
at ReactCompositeComponentWrapper.wrapper [as _renderValidatedComponent] (bundle.js:1530)
at ReactCompositeComponentWrapper._updateRenderedComponent (bundle.js:7752)
at ReactCompositeComponentWrapper._performComponentUpdate (bundle.js:7736)
at ReactCompositeComponentWrapper.updateComponent (bundle.js:7665)
at ReactCompositeComponentWrapper.wrapper [as updateComponent] (bundle.js:1530)

Any help is appreciated. Thank you.

NOTE: if I remove all the code related to the Action everything works fine, the table is displayed correctly

==============================================================================

EDIT: Modifing onClick={this.props.functionGetRecipe(recipe_id)} to onClick={this.functionGetRecipe(recipe_id)} returns me the following error:

bundle.js:36675 Uncaught (in promise) TypeError: Cannot read property 'functionGetRecipe' of undefined

Just in case, here's my /actions/index.js:

import axios from 'axios';
const API_KEY = "***********************************";
export const GET_URL = `https://food2fork.com/api/get?key=${API_KEY}`;
export function getRecipe(recipeId) {
    const url = `${GET_URL}&Id=${recipeId}`;
    const request = axios.get(url);

    return {
        type: GET_RECIPE,
        payload: request
    };
}

==============================================================================

EDIT2: That was it, now it works. Here's the change:

constructor(props) {
    super(props);
    this.renderRecipes = this.renderRecipes.bind(this);
}

Answer 1

Try replacing

<tr onClick={this.props.functionGetRecipe(recipe_id)} key={recipe_id}>

By :

<tr onClick={this.functionGetRecipe(recipe_id)} key={recipe_id}>

Edit : I think declaring your method functionGetRecipe() is useless you can use this.props.getRecipe(recipe_id) directly

Edit 2 : try binding renderRecipes instead :

constructor(props) {
        super(props);
        this.renderRecipes = this.renderRecipes.bind(this);
    }