"sort by react"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/-J0hn-/pen/MEpavZ?depth=everything&order=popularity&page=41&q=react&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'> <style class="cp-pen-styles">img { width: 100%; } form { padding: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } form input[type="submit"] { border: none; background: orangered; color: white; margin-left: 15px; border-radius: 3px; padding: 0 15px; cursor: pointer; } #rating-filter { color: white; padding: 5px; background: orangered; border: none; cursor: pointer; } section { margin: auto; margin-top: 20px; max-width: 760px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } figure { background-color: white; width: 14em; margin: .50em; box-shadow: 0 5px 18px 0 gray; overflow: hidden; position: relative; } figure img { height: 21em; } figure figcaption { line-height: 2; padding: 0 .80em; } figure figcaption p { text-transform: capitalize; font-size: .80em; margin-bottom: 0; color: orangered; } figure figcaption .rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } figure figcaption .rating .fa-heart { color: #fa5050; margin: .50em .50em .50em 0; } figure figcaption .rating h4 { margin: 0; } @media (max-width: 737px) { section { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } </style></head><body> <div id="root"></div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script> <script >"use strict"; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } var movies = [{ title: "Mad Max: Fury Road", genre: ["Action", "Adventure", "Sci-Fi"], rating: 8.3, poster: "https://s-media-cache-ak0.pinimg.com/originals/ce/0c/93/ce0c93d50ae68922d1f4f6667c95e1a8.jpg" }, { title: "The Hunger Games: Mockingjay Part 1", genre: ["Adventure", "Sci-Fi", "Thriller"], rating: 6.8, poster: "https://1.bp.blogspot.com/-Ds0sudZmSq4/Vgxrr75E77I/AAAAAAAAREo/sZkZW5YMDTw/s1600/Mockingjay%2BPart%2B1.jpg" }, { title: "Jurassic World", genre: ["Action", "Adventure", "Sci-Fi"], rating: 7.2, poster: "https://s-media-cache-ak0.pinimg.com/736x/0b/ab/9a/0bab9a9c671dbb7aa8626eec44a0195f.jpg" }, { title: "Everest", genre: ["Adventure", "Drame", "Thriller"], rating: 7.4, poster: "http://www.impawards.com/2015/posters/everest_ver4.jpg" }, { title: "Insurgent", genre: ["Adventure", "Sci-Fi", "Thriller"], rating: 6.4, poster: "http://cdn2-www.comingsoon.net/assets/uploads/2015/01/FIN16_Insurgent_Guns_1Sht_Trim-1422379653-mtv-14224534611.jpg" }, { title: "Sicario", genre: ["Action", "Crime", "Drama"], rating: 7.6, poster: "https://s-media-cache-ak0.pinimg.com/564x/7f/a1/5c/7fa15c26aa2cb48562ea37bbc177be74.jpg" }, { title: "Green Lantern", genre: ["Action", "Adventure", "Sci-Fi"], rating: 5.6, poster: "https://images-na.ssl-images-amazon.com/images/M/MV5BMTMyMTg3OTM5Ml5BMl5BanBnXkFtZTcwNzczMjEyNQ@@._V1_UX182_CR0,0,182,268_AL_.jpg" }, { title: "Prisoners", genre: ["Crime", "Drama", "Mystery"], rating: 8.1, poster: "https://images-na.ssl-images-amazon.com/images/M/MV5BMTg0NTIzMjQ1NV5BMl5BanBnXkFtZTcwNDc3MzM5OQ@@._V1_UX182_CR0,0,182,268_AL_.jpg" }, { title: "The Hateful Eight", genre: ["Crime", "Drama", "Mystery"], rating: 7.8, poster: "https://images-na.ssl-images-amazon.com/images/M/MV5BMjA1MTc1NTg5NV5BMl5BanBnXkFtZTgwOTM2MDEzNzE@._V1_UX182_CR0,0,182,268_AL_.jpg" }]; // removes all articles in the movie title function strip(title) { return title.replace(/^(a|an|the)\s/i, ""); } var App = function (_React$Component) { _inherits(App, _React$Component); function App(props) { _classCallCheck(this, App); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { movies: movies, value: "Sort" }; _this.handleChange = _this.handleChange.bind(_this); _this.handleSubmit = _this.handleSubmit.bind(_this); return _this; } App.prototype.handleChange = function handleChange(e) { this.setState({ value: e.target.value }); }; App.prototype.handleSubmit = function handleSubmit(e) { var _state = this.state; var value = _state.value; var movies = _state.movies; switch (value) { case "Low rating": this.setState({ movies: movies.sort(function (a, b) { return a.rating > b.rating ? 1 : -1; }) }); break; case "High rating": this.setState({ movies: movies.sort(function (a, b) { return b.rating > a.rating ? 1 : -1; }) }); break; case "A-Z": this.setState({ movies: movies.sort(function (a, b) { return strip(a.title) > strip(b.title) ? 1 : -1; }) }); break; case "Z-A": this.setState({ movies: movies.sort(function (a, b) { return strip(b.title) > strip(a.title) ? 1 : -1; }) }); break; default: this.setState({ movies: movies }); break; } e.preventDefault(); }; App.prototype.render = function render() { var _state2 = this.state; var movies = _state2.movies; var value = _state2.value; return React.createElement( "div", null, React.createElement( "form", { onSubmit: this.handleSubmit }, React.createElement( "select", { id: "rating-filter", value: value, onChange: this.handleChange }, React.createElement( "option", { value: "Sort" }, "Sort" ), React.createElement( "option", { value: "Low rating" }, "Low rating" ), React.createElement( "option", { value: "High rating" }, "High rating" ), React.createElement( "option", { value: "A-Z" }, "A-Z" ), React.createElement( "option", { value: "Z-A" }, "Z-A" ) ), React.createElement("input", { type: "submit", value: "Filter" }) ), React.createElement( "section", null, movies.map(function (m) { return React.createElement(Movietemplate, { movie: m }); }) ) ); }; return App; }(React.Component); var Movietemplate = function (_React$Component2) { _inherits(Movietemplate, _React$Component2); function Movietemplate(props) { _classCallCheck(this, Movietemplate); return _possibleConstructorReturn(this, _React$Component2.call(this, props)); } Movietemplate.prototype.render = function render() { var _props$movie = this.props.movie; var genre = _props$movie.genre; var rating = _props$movie.rating; var poster = _props$movie.poster; return React.createElement( "figure", null, React.createElement("img", { src: poster }), React.createElement( "figcaption", null, React.createElement( "p", null, genre ), React.createElement( "div", { className: "rating" }, React.createElement("i", { className: "fa fa-heart" }), React.createElement( "h4", null, rating ) ) ) ); }; return Movietemplate; }(React.Component); ReactDOM.render(React.createElement(App, null), document.getElementById("root")); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: