Menu
How to add alphabet order on side in section list? I checked out some packages such as react-native-atoz and react-native-selectedsectionlist. What is the best one? or how do I implement one from the scratch? Here is an example from the iOS contacts app:
691
To sort an array of objects in React:Create a shallow copy of the array. Call the sort() method on the array passing it a function. The function is used to define the sort order.
SectionList s are like FlatList s, but they can have section headers to separate groups of rows. SectionList s render each item in their input sections using the renderSectionHeader and renderItem prop. Each item in sections should be an object with a unique id (the key), and an array data of row data.
The React Native SectionList component is a list view component which sets the list of data into broken logical section. The broken data can be implemented using its section header prop renderSectionHeader. To implement the SectionList component, we need to import SectionList from 'react-native' library.
First, in a new blank React app, we will create an array of strings which will be our list. Then we will map it out as an unordered list. We will also create the dropdown to select which type of sorting needs to be applied. import { React, useState } from "react"; import "./App.
If you have a list of names what i would do is to split it up by name and made the list you have above. See my example
So now you can run .map on the array made and display the letter and the names accordingly!
const names = [
"Ned Stark",
"Robert Baratheon",
"Jaime Lannister",
"Catelyn Stark",
"Cersei Lannister",
"Daenerys Targaryen",
"Jorah Mormont",
"Jon Snow"
]
function getFirstLetterFrom(value) {
return value.slice(0, 1).toUpperCase();
}
const newNames = names
.reduce(function (list, name, index) {
let listItem = list.find((item) => item.letter && item.letter === getFirstLetterFrom(name));
if (!listItem) {
list.push({"letter": getFirstLetterFrom(name), "names": [name]})
} else {
listItem.names.push(name)
}
return list;
}, []);
console.log(newNames)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
