How to create alphabet and Input Search in React JS - json

Question

I want to filter list by alphabet and search input. On click of each alphabet it should sort the list according to the alphabet.
Attached is the image to explain better
For example : If you click on "A" then it will display list starting with "A" Like ( Apple, Air plane, Adidas ) etc. And the case should be same when you input in search input box.
Below is the render function in my component which is fetching the list by JSON API
component.js
{this.props.items.list.map((item) => (
<li key={item.id} className="celeb-item">
<div className="celeb-item-info">
<img src={item.image_url} className="img-responsive" />
<strong>{item.name}</strong>
</div>
</li>
))}

Answer 1

import React, { Component } from 'react';
class App extends Component {
state = { searchInput: '', alphabet: ''};
onSearchInputChange = (e) => {
this.setState({searchInput: e.target.value})
}
onAlphabetClick = (e) => {
this.setState({alphabet: e.target.value})
}
prepareAlphabets = () => {
let result = [];
for(let i=65; i<91; i++) {
result.push(
<button type="button" key={i} onClick={this.onAlphabetClick} value={String.fromCharCode(i)} >{String.fromCharCode(i)}</button>
)
}
return result;
}
elementContainsSearchString = (searchInput, element) => (searchInput ? element.name.toLowerCase().includes(searchInput.toLowerCase()) : false);
filterItems = (itemList) => {
let result = [];
const { searchInput,alphabet } = this.state;
if(itemList && (searchInput || alphabet)) {
result = itemList.filter((element) => (element.name.charAt(0).toLowerCase() === alphabet.toLowerCase()) ||
this.elementContainsSearchString(searchInput, element));
} else {
result = itemList || [];
}
result = result.map((item)=> (<li>{item.name}</li>))
return result;
}
render() {
const itemList = [{id: 1, name:'abcd'},{id: 2, name:'gfhj'}, {id: 3, name:'fh'}, {id: 4, name:'zxbv'}, {id: 5, name:'ewyur'}, {id: 6, name:'gsdjhbndf'}, {id: 7, name:'gbhfvd'}, {id: 8, name:'wgtaqe'}, {id: 1, name:'ab'}, {id: 1, name:'bcd'}, {id: 1, name:'cde'}];
// const itemList = undefined;
const filteredList = this.filterItems(itemList);
return (
<div>
<input type="search" onChange={this.onSearchInputChange} />
{this.prepareAlphabets()}
<ul>
{filteredList}
</ul>
</div>
);
}
}
export default App;

Answer 2

The most straightforward way to achieve what you describe is to chain an Array.filter just before your Array.map.
You can use the onChange & onClick handles on your search field and alphabet buttons, respectively, to modify a parameter kept in your components state. This parameter could then be passed into your filter, looking something like this:
{this.props.items.list
.filter(item => item.name.startsWith(this.state.searchValue)
.map(item => (
<li key={item.id} className="celeb-item">
<div className="celeb-item-info">
<a href="#">
<img src={item.image_url} className="img-responsive" />
</a>
<strong>{item.name}</strong>
</div>
</li>
))
}