リスト内のレンダリングボタン

Question

クリックイベントを含むボタンをリスト内でレンダリングするにはどうすればよいでしょうか？私はなぜリストの各犬の隣にボタンを描き、その犬を私のカートの配列に加えることができないのか分かりません。 onClickイベントに関数を追加するたびに、私のインターフェイス全体が消えてしまうのでエラーが出るので、私はここで何かを逃していることを知っています。

var PetStore = React.createClass({ 
    getInitalState: function() { 
     return ({ 
     cart: [] 
    }) 
    }, 
    addToCart: function(dog) { 
    this.setState({ 
    cart: this.state.cart.concat([dog]) 
    }) 
}, 
    render: function() { 
    return (
     <ul> 
     {this.props.dogs.map(function(dog){ 
      return <li>Breed: {dog.breed}, age: {dog.age} 
     <button onClick={this.addToCart}>Buy</button></li> 
     })} 
     </ul> 
    ) 

    } 
}) 

Answer 1

var DOGS = [{ 
    breed: 'Husky', 
    age: 5 
}, { 
    breed: 'Pit bull', 
    age: 2 
}, { 
    breed: 'Golden Retriever', 
    age: 10 
}, { 
    breed: 'Black lab', 
    age: 2 
}] 
var PetStore = React.createClass({ 
    propTypes: { 
    dogs: React.PropTypes.array 
    }, 
    getInitialState: function() { 
    return ({ 
     cart: [] 
    }) 
    }, 
    addToCart: function(dog) { 
    this.setState({ 
     cart: this.state.cart.concat([dog]) 
    }) 
    }, 
    render: function() { 
console.log(this.props); 
    var self = this; 
    return (
     <ul> 
     {this.props.dogs.map(function(dog, index){ 
      return (<li key={index}>Breed: {dog.breed}, age: {dog.age} <button onClick={self.addToCart.bind(self,dog)}>Buy</button></li>) 
    })} 
     </ul> 
    ) 

    } 
}) 

ReactDOM.render(<PetStore dogs={DOGS}/>, document.getElementById('test'));