React newbie here needs help. This is a simple practice app that iterates through an array to output voting cards. I'm getting the dreaded 'Uncaught TypeError: Cannot read property 'add' of undefined' error but as you can see from my code I've bound it. What am I missing?

```
<body>
    <div id='app'>React has not rendered</div>

    <script type="text/babel">

    class MealPlanner extends React.Component{
        constructor(props){
            super(props);
            this.add = this.add.bind(this);
            this.subtract = this.subtract.bind(this);
            this.state = {
                votes: 0
            };
            this.meallist = this.props.list.map(function(meal){
                return <div key={meal.id} className="dinner">
                    <MealPic mealimage={meal.img}/>
                    <h1>{meal.name}</h1>
                    <p>Like</p>
                    <button onClick={this.add}>+1</button>
                    <p>UnLike</p>
                    <button onClick={this.subtract}>-1</button>
                    <div>Total: {this.state.votes}</div>
                    <button onClick={this.reset}>Reset</button>
                </div>
            });
        }
        add(event){
            this.setState ({
                votes: this.state.votes + 1
            })
        }
        subtract(event){
            this.setState ({
                votes: this.state.votes - 1
            })
        }
        reset(event){
            count: 0
        }
    render(){
        return(
            <div className='wrapper'>
                {this.meallist}
            </div>
        );
    }
    }

    function MealPic(props){
        return(
            <img src={props.mealimage} alt="meal image" className="dinnerimage"/>
        );
    }

    var mealPics = [
        {id: 1, name: 'Meal One', img: "https://static.pexels.com/photos/406152/pexels-photo-406152.jpeg"},
        {id: 2, name: 'Meal Two', img: "https://images.pexels.com/photos/566345/pexels-photo-566345.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"},
        {id: 3, name: 'Meal Three', img: "https://images.pexels.com/photos/605626/pexels-photo-605626.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"}
    ];

    ReactDOM.render(
        <MealPlanner  list = {mealPics} />,
        document.getElementById('app')
    );

    </script>

</body>

```