R: Tick Up/Down Demo

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://npmcdn.com/classnames/index.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css">
<div class="js-app"></div>

CSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}
button {
    outline: none;
}
.price {
    margin: 20px 0;
    text-align: center;
    color: black;
}

Babel + JSX

console.clear();

/**
 *	@todos
 *  - Tick up and show first entry in "up" array
 */

const prices = {
    "up" : [
      {"r": 10.25, "f" : "10.25"},
      {"r": 10.50, "f" : "10.50"},
      {"r": 10.75, "f" : "10.75"},
      {"r": 11.00, "f" : "11.00"},
      {"r": 11.25, "f" : "11.25"},
      {"r": 11.50, "f" : "11.50"},
      {"r": 11.75, "f" : "11.75"},
      {"r": 12.00, "f" : "12.00"},
      {"r": 12.25, "f" : "12.25"},
      {"r": 12.50, "f" : "12.50"}
    ],
    "down": [
      {"r": 7.50, "f" : "7.50"},
      {"r": 7.75, "f" : "7.75"},
      {"r": 8.00, "f" : "8.00"},
      {"r": 8.25, "f" : "8.25"},
      {"r": 8.50, "f" : "8.50"},
      {"r": 8.75, "f" : "8.75"},
      {"r": 9.00, "f" : "9.00"},
      {"r": 9.25, "f" : "9.25"},
      {"r": 9.50, "f" : "9.50"},
      {"r": 9.75, "f" : "9.75"}
    ]
};

var Ticker = React.createClass({
	
    getInitialState() {
    	return {
        	price: 0
        }
    },
    
    handleClick(dir) {
    	const prices = this.props.prices;
        
        this.setState({
        	price: prices[dir][0].f
        });
    },
    
    render() {
        return (
        	<div>
                <button className="btn btn-success btn-block" onClick={() => this.handleClick('up')}>Up</button>
                <h3 className="price">{this.state.price}</h3>
                <button className="btn btn-danger btn-block" onClick={() => this.handleClick('down')}>Down</button>
            </div>
    	)
    }
});

ReactDOM.render(<Ticker prices={prices} />, document.body.querySelector('.js-app'));