ReactJS Filter

Developer
Nicholas M. Smith
Size
5,122 Kb
Views
26,312
  1. ReactJS Filter Previews
  2. ReactJS Filter HTML Codes
  3. ReactJS Filter CSS Codes
  4. ReactJS Filter JS Codes

How do I make an reactjs filter?

ReactJS Filter w/ dropdown categories. What is a reactjs filter? How do you make a reactjs filter? This script and codes were developed by Nicholas M. Smith on 27 August 2022, Saturday.

ReactJS Filter Previews
IQ Test

ReactJS Filter - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ReactJS Filter</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container-component"></div> <script src='https://fb.me/react-15.1.0.min.js'></script>
<script src='https://fb.me/react-dom-15.1.0.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ReactJS Filter - Script Codes CSS Codes

.item { padding-top: 20px; padding-bottom: 20px; text-align: center;
}
.item h2 { text-transform: uppercase;
}
.item h2 a { text-decoration: none;
}
.featured-img { margin-bottom: 20px; max-width: 100%;
}
.search-component { font-size: 18px; margin: 40px 0 20px; outline: none; padding: 20px; width: 100%;
}
.categories { display: block; margin: 5px 0;
}
.categories span { margin: 5px;
}
.my-posts,
.filter-options { margin: 0 auto; max-width: 1200px;
}
.my-posts__row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0 auto; max-width: 1200px;
}
.my-posts__items { padding: 20px; text-align: center; width: 100%;
}
@media (min-width: 782px) { .my-posts__items { margin-right: 20px; padding: 0 0 20px 0; width: calc(25% - 20px); }
}
.my-posts__items:nth-child(4n) { margin-right: 0;
}
.filter-option { padding: 20px;
}
@media (min-width: 782px) { .filter-option { padding: 20px 0; }
}
.filter-option label { display: block; margin-bottom: 10px;
}

ReactJS Filter - Script Codes JS Codes

"use strict";
var POSTS = [{ "id": 319, "title": "Northern Lights", "img": "https://hd.unsplash.com/photo-1466939721550-ad3ef4b9eeec", "categories": ["Sky"] }, { "id": 316, "title": "Flower", "img": "https://hd.unsplash.com/photo-1465628976988-fe43bda15798", "categories": ["Flowers"] }, { "id": 296, "title": "Buildings", "img": "https://hd.unsplash.com/photo-1464655646192-3cb2ace7a67e", "categories": ["Buildings"] }, { "id": 211, "title": "Fire", "img": "https://hd.unsplash.com/photo-1468245856972-a0333f3f8293", "categories": ["Fire"] }, { "id": 247, "title": "Mountains", "img": "https://hd.unsplash.com/photo-1467173572719-f14b9fb86e5f", "categories": ["Mountains", "Stars"] }, { "id": 245, "title": "More Mountains", "img": false, "categories": ["Mountains"] }, { "id": 243, "title": "Building Blue Sky", "img": "https://hd.unsplash.com/photo-1463392898715-3939d4ab1019", "categories": ["Buildings"] }, { "id": 235, "title": "Broken", "img": false, "categories": ["Uncategorized"] }];
var CATS = ["Buildings", "Flowers", "Fire", "Mountains", "Stars", "Sky", "Uncategorized"];
var FilterForm = React.createClass({ displayName: "FilterForm", // getInitialState is the state // of page when it first displays. getInitialState: function getInitialState() { return { posts: this.props.posts, cats: '' }; }, // filterState set the state // when a category is selected. filterState: function filterState(val) { this.setState({ cats: val }); }, render: function render() { var theCats = this.props.cats, state = this.state; return React.createElement( "div", { className: "container" }, React.createElement(FilterOptions, { catOptions: theCats, changeOption: this.filterState }), React.createElement( "div", { className: "filter-form" }, React.createElement(FilterItems, { posts: state.cats ? this.props.posts.filter(function (post) { return post['categories'].indexOf(state.cats) > -1; }) : this.props.posts }) ) ); }
});
var FilterOptions = React.createClass({ displayName: "FilterOptions", changeOption: function changeOption(e) { var val = e.target.value; this.props.changeOption(val); }, render: function render() { return React.createElement( "div", { className: "filter-options" }, React.createElement( "div", { className: "filter-option" }, React.createElement( "label", null, "Categories" ), React.createElement( "select", { id: "cats", value: this.props.cats, onChange: this.changeOption }, React.createElement( "option", { value: "" }, "All" ), this.props.catOptions.map(function (option, i) { return React.createElement( "option", { key: i, value: option }, option ); }) ) ) ); }
});
// The filtered posts
var FilterItems = React.createClass({ displayName: "FilterItems", render: function render() { return React.createElement( "div", { className: "my-posts" }, React.createElement( "div", { className: "my-posts__row" }, this.props.posts.map(function (post, i) { return React.createElement( "div", { key: i, className: "my-posts__items" }, React.createElement("img", { src: post.img ? post.img : 'http://placehold.it/400x267', className: "featured-img" }), React.createElement( "h2", null, post.title ) ); }) ) ); }
});
// Render Components to DOM
ReactDOM.render(React.createElement(FilterForm, { posts: POSTS, cats: CATS }), document.getElementById('container-component'));
ReactJS Filter - Script Codes
ReactJS Filter - Script Codes
Home Page Home
Developer Nicholas M. Smith
Username icutpeople
Uploaded August 27, 2022
Rating 3.5
Size 5,122 Kb
Views 26,312
Do you need developer help for ReactJS Filter?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nicholas M. Smith (icutpeople) Script Codes
Name
Animated Image Hovers
HTML5 Video Text Overlay Flexbox
Scss animated button
CSS Modal
Social Icon Hover Boxes
Loader
CSS Off Canvas Menu
Tooltip
SVG Hand Drawn Navicon
Responsive 3D Flip Navigation
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!