Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://fb.me/react-with-addons-15.1.0.js"></script>
<script src="https://fb.me/react-dom-15.1.0.js"></script>
<script src="https://cdn.rawgit.com/zloirock/core-js/master/client/shim.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
 
.block{
  font-size:18px;
  border-radius:3px;
  font-family:arial;
  width: 200px;
  color:#777;
  padding:20px 0;
cursor:pointer;
  text-align: center;
  background-color: #fff;
  box-shadow:0 2px 3px rgba(0,0,0,0.3);
  margin-top:18px;
}
.block:hover{
  background-color: #ccc;
  color:#fafafa
}
body{
  background-color: #f1f1f1;
}
 
const{ CSSTransitionGroup} = React.addons;
class App extends React.Component {
    constructor(props){
        super(props);
        this.state={items: ['hello', 'world', 'click', 'me']};
    }
    handleAdd() {
        let {items} = this.state
        this.setState({items: [...items, 'new-element'+(items.length+1)]});
    }
    handleRemove(i) {
        var newItems = this.state.items.slice();
        newItems.splice(i, 1);
        this.setState({items: newItems});
    }
    render() {
        var items = this.state.items.map((item, i)=>
        <div key={item} className="block" onClick={this.handleRemove.bind(this, i)}>
        {item}
        </div>
    );
    return (
        <div>
        <button onClick={this.handleAdd.bind(this)}>Add Item</button>
        <CSSTransitionGroup
        transitionName={{
            enter: "animated",
            enterActive: "rubberBand",
            leave: "animated",
            leaveActive: "fadeOutRight"
        }}>
        {items}
        </CSSTransitionGroup>
        </div>
    );
}
}
    
                ReactDOM.render(<App/>,document.getElementById('root'))
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers