TypeError: unresolved function in ReactJS

Code Feedback
1

For some reason my function is undefined.

Book.js:63 Uncaught TypeError: Cannot read property ‘updateRecipeItem’ of undefined(…)

What do I have wrong and what can I do to fix this?
I feel like I’m calling the array incorrectly or it might have something to do with the setState. My code for the component is as follows:

import React, { Component } from 'react';
import Recipe from './Recipe.js';


class Book extends Component{

constructor(props) {
    super(props);
    this.state = {
        recipes: [
            'Chocolate Chip Cookies',
            'Caramel Apples',
            'Chocolate Covered Strawberries'
        ]
    };
   this.removeRecipeItem = this.removeRecipeItem.bind(this);
   this.updateRecipeItem = this.updateRecipeItem.bind(this);
}

removeRecipeItem(i){
    console.log('remove' + i);
    let arr = this.state.recipes;
    arr.splice(i,1);
    this.setState({recipes: arr});
}

updateRecipeItem(newText, i) {
    console.log('updating');
    let arr = this.state.recipes;
    arr[i] = newText;
    this.setState({recipes: arr});
}

recipeItem(item, i) {
        return(
            <Recipe key={i} index={i} updateRecipeText={this.updateRecipeItem} deleteFromBook={this.removeRecipeItem}>
                {item}
            </Recipe>
        )
}


render(){
    return (
        <div className="board">
            {
                this.state.recipes.map(this.recipeItem)
            }
        </div>
    );
}

}

export default Book;

Thanks,
Mitch.

2

Try to add this.recipeItem binding in your constructor:

this.recipeItem = this.recipeItem.bind(this)
1 Like
3

Lol of course! I guess I let that slip past me. Thank you!