<ButtonToolbar>
                  <Button
                    bsStyle="danger"
                    onClick={e => {
                      props.deleteRecipe(index);
                    }}
                  >
                    Delete
                  </Button>
                  <EditRecipe
                    currentRecipe={index}
                    recipes={props.recipes}
                    handleEditName={props.handleEditName}
                    handleEditProduct={props.handleEditProduct}
                  />
                </ButtonToolbar>



class EditRecipe extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      showModal: false
    };
    this.handleShow = this.handleShow.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  handleClose() {
    this.setState({ showModal: false });
  }

  handleShow() {
    this.setState({ showModal: true });
  }

  editName(i, event) {
    this.props.handleEditName(i, event);
  }

  editProduct(i, event) {
    this.props.handleEditProduct(i, event);
  }

  render() {
    let id = this.props.currentRecipe;
    let recipes = this.props.recipes[id];
    console.log(recipes);

    return (
      <div>
        <Button bsStyle="primary" bsSize="medium" onClick={this.handleShow}>
          Edit Recipe
        </Button>
        <Modal show={this.state.showModal} onHide={this.handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Edit Recipe</Modal.Title>
          </Modal.Header>
          <form onSubmit={this.props.onSubmit}>
            <Modal.Body>
              <FormGroup controlId="RecipeName">
                <ControlLabel>Recipe</ControlLabel>
                <FormControl
                  type="text"
                  placeholder="Recipe Name"
                  value={recipes.name}
                  onChange={this.editName.bind(this, id)}
                />
              </FormGroup>
              <FormGroup controlId="formControlsTextarea">
                <ControlLabel>Products</ControlLabel>
                {recipes.products.map((product, id) => {
                  return (
                    <FormControl
                      key={product + "_" + id}
                      type="text"
                      value={product}
                      onChange={this.editProduct.bind(this, id)}
                      placeholder={"Product " + (id + 1)}
                    />
                  );
                })}
              </FormGroup>
              <Button onClick={this.props.addInput}>Add Product</Button>
            </Modal.Body>
            <Modal.Footer>
              <Button bsStyle="success" type="submit">
                Next station: Kitchen
              </Button>
              <Button onClick={this.handleClose}>Close</Button>
            </Modal.Footer>
          </form>
        </Modal>
      </div>
    );
  }
}