Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://fb.me/react-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
  <div id="master"></div>
</body>
</html>
 
​
 
    var Recipes = React.createClass({
    // hook up data model
    getInitialState: function() {
      return {
        recipeList: [
            {recipe: 'Cookies', ingredients: ['Flour', 'Chocolate']},
            {recipe: 'Pumpkin Pie', ingredients: ['Pumpkin Puree', 'Sweetened Condensed Milk', 'Eggs', 'Pumpkin Pie Spice', 'Pie Crust']},
            {recipe: 'Onion Pie', ingredients: ['Onion', 'Pie-Crust']},
            {recipe: 'Spaghetti', ingredients: ['Noodles', 'Tomato Sauce', 'Meatballs']}
          ]
      }
    },
​
    ingredientList: function(ingredients) {
     return ingredients.map((ingredient, index) => {
      return (<li key={index} className="list-group-item">{ingredient}</li>)
     })
    },
​
    eachRecipe: function(item, i) {
      return (
          <div className="panel panel-default">
            <div className="panel-heading"><h3 key={i} index={i} className="panel-title">{item.recipe}</h3></div>
            <div className="panel-body">
              <ul className="list-group">
                {this.ingredientList(item.ingredients)}
              </ul>
            </div>
          </div>
      )
    },
​
    add: function(text) {
      var name = this.refs.userVal.value;
      var items = this.refs.newIngredients.value.split(",");
      this.setState({recipeList: [...this.state.recipeList, { recipe: name, ingredients: items }]})
    },
​
    render: function() {
        return (
          <div>
          <div>
          <button type="button" className="btn btn-success btn-lg" data-toggle="modal" data-target="#myModal">Add Recipe</button>
          <div id="myModal" className="modal fade" role="dialog">
            <div className="modal-dialog">
​
            <div className="modal-content">
            <div className="modal-header">
          <button type="button" className="close" data-dismiss="modal">&times;</button>
            <h4 className="modal-title">Add a new recipe</h4>
            </div>
            <div className="modal-body">
            <form role="form">
                    <div className="form-group">
                      <label forName="recipeItems">Recipe</label>
                        <input ref="userVal" type="recipe" className="form-control"
                        id="name" placeholder="Enter Recipe Name"/>
                    </div>
                    <div className="form-group">
                      <label for="ingredientItems">Ingredients</label>
                        <input ref="newIngredients" type="ingredients" className="form-control"
                            id="ingredients" placeholder="Enter Ingredients separated by commas"/>
                    </div>
                    <button onClick={this.add} type="button" className="btn btn-default">Submit</button>
                  </form>
            </div>
            <div className="modal-footer">
          <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
          </div>
      </div>
      </div>
      </div>
          {
            this.state.recipeList.map(this.eachRecipe)
          }
          </div>
          </div>
        );
      }
  });
​
  ReactDOM.render(
    <Recipes />,
    document.getElementById('master')
  )
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers