Recipe.js

Recipe.js

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

class Recipe extends Component {
  constructor(){
    super();
    this.showDetail = this.showDetail.bind(this);
    this.remove = this.remove.bind(this);
  }
  showDetail(){
    this.refs.detail.className = this.refs.detail.className ? '' : 'hidden';
    this.render();
  }
  remove(){
    let id = this.props.id;
    console.log('removing ' + id)
    this.props.removeRecipe(id);
  }
  render(){
    let ingredientNodes = this.props.ingredients.split(',').map((ingredient, index) => {
      return (
        <Ingredient key={index}>
          {ingredient}
        </Ingredient>
      );
    });
    return (
      <div>
        <div className="bg-primary recipe-name" onClick={this.showDetail}>
          {this.props.name}
          <span className="fr" onClick={this.remove}><kbd>x</kbd></span>
        </div>
        <div className="hidden" ref="detail">
          <h2 className="text-center">Ingredients</h2>
          <hr />
          {ingredientNodes}
        </div>
      </div>
    );
  }
}

Recipe.propTypes = {
  name: React.PropTypes.string.isRequired,
  ingredients: React.PropTypes.string.isRequired
};

export default Recipe;