JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/mithril/0.2.3/mithril.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container" id='main'>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <div id="app"></div>
    </div>
  </div>
</div>

CSS

#main{margin-top: 20px;}

Babel + JSX

/** @jsx m */

const ListGroup = {
  view(ctrl, props){
    return(
     <div>
      <ul className="list-group">
        {props.items().map((d, i) => {return(
           <ListItem 
             key={i}
             text={d.text}
             removeItem={(e) => props.items().splice(i, 1)}
             addItem={(e) => props.items().push({
               text: "Item" + (props.items().length + 1)
             })}
             editItem={(e) => props.editedItem(i)}
           >
           </ListItem>
        )})}
      </ul>
      <textarea 
        className="form-control"
        value={props.items()[props.editedItem()].text}
        onchange={(e) => console.log(e.target.value)}
      />
     </div>  
    )
  }
}

const ListItem = {
  view(ctrl, props){
    return(
      <li className="list-group-item">
        <div className='clearfix'>
          <span className='pull-left'>{props.text}</span>
          <span className='pull-right'>
             <div class='btn-group'>
               <button className="btn btn-sm btn-success" 
                 onclick={props.editItem}
               >
                 Edit
               </button>
               <button className="btn btn-sm btn-danger" 
                 onclick={props.removeItem}
               >
                 Remove
               </button>
         		 </div>
          </span>
        </div>
      </li>
    )
  }
}

const items = [
  {text: "Item 1", value: 10},
  {text: "Item 2", value: 20}
]

const App = {
  controller(props){
    this.items = m.prop(items)
    this.addItem = () => {
      var N = this.items().length
      this.items().push({text: `Item ${N + 1}`, value: Math.random()})
    }
    this.removeItem = (i) =>
      this.items().splice(i, 1)
    this.editedItem = m.prop(0)
  },
  view(ctrl, props){
    return(
      <div>
         <ListGroup items={ctrl.items} editedItem={ctrl.editedItem} />
      </div>
    )
  }
}

m.mount(
  document.getElementById("app"),
  <App items={items} />
)