Last active
November 30, 2023 21:15
-
-
Save PostPCEra/93193196cdf6f34dfeac1dd3977960c5 to your computer and use it in GitHub Desktop.
various ways of Filtering an ARRAY of items and displaying them.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 'use client'; // needed if using Next.js 13 | |
| // This page will demonstrate various ways for filtering and displaying an ARRAY of items. | |
| import React, { useState } from 'react'; | |
| import { SegmentedControl } from '@mantine/core'; | |
| const sportPersonList = [ | |
| { id: 1, name: 'LeBron James', category: 'Basketball' }, | |
| { id: 2, name: 'Serena Williams', category: 'Tennis' }, | |
| { id: 3, name: 'Cristiano Ronaldo', category: 'Soccer' }, | |
| { id: 4, name: 'Usain Bolt', category: 'Track and Field' }, | |
| { id: 5, name: 'Michael Phelps', category: 'Swimming' }, | |
| { id: 6, name: 'Simone Biles', category: 'Gymnastics' }, | |
| { id: 7, name: 'Lionel Messi', category: 'Soccer' }, | |
| { id: 8, name: 'Roger Federer', category: 'Tennis' }, | |
| { id: 9, name: 'Megan Rapinoe', category: 'Soccer' }, | |
| { id: 10, name: 'Muhammad Ali', category: 'Boxing' }, | |
| // ... other sport persons | |
| ]; | |
| const msg1StyleObj = { | |
| fontSize: 14, | |
| color: 'grey', | |
| textAlign: 'center', | |
| paddingTop: '1px', | |
| }; | |
| // -------main App calling Components -------------------------------------------------------------- | |
| export default function FilterDemoApp() { | |
| return ( | |
| <> | |
| <h3> | |
| This page will demonstrate various ways for Filtering and displaying an ARRAY of | |
| items. | |
| </h3> | |
| <ReactDropDownFilter_Demo1 /> | |
| <MantineSegmentControl_Demo2 /> | |
| <MantineSegmentControl_Demo3 /> | |
| </> | |
| ); | |
| } | |
| // --------------- basic Mantine (UI Library) SegmentControl Demo 2--------------------- | |
| function MantineSegmentControl_Demo2() { | |
| const [value, setValue] = useState('react'); | |
| return ( | |
| <> | |
| <div style={{ backgroundColor: 'lightblue' }}> | |
| <h3> DEMO 2: basic demo of Mantine (UI Library) SegmentControl </h3> | |
| <span style={msg1StyleObj}> | |
| {' '} | |
| Here, we are using "Mantine SegmentControl buttons" like a group of RADIO | |
| buttons, based on RADIO button selection you can take any ACTION (to display | |
| some thing) | |
| </span> | |
| <SegmentedControl | |
| value={value} | |
| onChange={setValue} | |
| data={[ | |
| { label: 'React', value: 'react' }, | |
| { label: 'Angular', value: 'ng' }, | |
| { label: 'Vue', value: 'vue' }, | |
| { label: 'Svelte', value: 'svelte' }, | |
| ]} | |
| /> | |
| <h4> Selecgted Value is: {value}</h4> | |
| </div> | |
| </> | |
| ); | |
| } | |
| // --------------- Full blown Mantine SegmentControl Demo 3--------------------- | |
| const MantineSegmentControl_Demo3 = () => { | |
| const allItems = [...sportPersonList]; | |
| const [selectedCategory, setSelectedCategory] = useState('Soccer'); | |
| //const [value, setValue] = useState('All'); | |
| const filteredItems = | |
| selectedCategory === 'All' | |
| ? allItems | |
| : allItems.filter(item => item.category === selectedCategory); | |
| // ----------------- | |
| return ( | |
| <div style={{ backgroundColor: 'lightgreen' }}> | |
| <h3> DEMO 3: Mantine SegmentControl with full list of items </h3> | |
| <SegmentedControl | |
| value={selectedCategory} | |
| onChange={setSelectedCategory} | |
| data={[ | |
| { label: 'All', value: 'All' }, | |
| { label: 'Basketball', value: 'Basketball' }, | |
| { label: 'Soccer', value: 'Soccer' }, | |
| { label: 'Swimming', value: 'Swimming' }, | |
| ]} | |
| /> | |
| {/* <span> value is {selectedCategory}</span> */} | |
| <ul> | |
| {filteredItems.map(item => ( | |
| <li key={item.id}> | |
| {item.name} - {item.category} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| ); | |
| }; | |
| // ------------ regular React Dropdown Filter Demo1 ----------------------------- | |
| const ReactDropDownFilter_Demo1 = () => { | |
| const [selectedCategory, setSelectedCategory] = useState('Soccer'); | |
| const allItems = [...sportPersonList]; | |
| const filteredItems = | |
| selectedCategory === 'All Categories' | |
| ? allItems | |
| : allItems.filter(item => item.category === selectedCategory); | |
| // ----------------- | |
| return ( | |
| // <div className="container"> | |
| <div style={{ backgroundColor: 'lightyellow' }}> | |
| <h3>DEMO 1: simple React Js Filtering an Array by Category</h3> | |
| <select | |
| value={selectedCategory} | |
| onChange={e => setSelectedCategory(e.target.value)} | |
| > | |
| <option value="All Categories">All Categories</option> | |
| <option value="Basketball">Basketball</option> | |
| <option value="Tennis">Tennis</option> | |
| <option value="Soccer">Soccer</option> | |
| <option value="Track and Field">Track and Field</option> | |
| <option value="Swimming">Swimming</option> | |
| <option value="Gymnastics">Gymnastics</option> | |
| <option value="Boxing">Boxing</option> | |
| {/* ... other categories */} | |
| </select> | |
| <ul> | |
| {filteredItems.map(item => ( | |
| <li key={item.id}> | |
| {item.name} - {item.category} | |
| </li> | |
| ))} | |
| </ul> | |
| </div> | |
| ); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment