Cannot read property 'localeCompare' of undefined - reactjs

Question

I am trying to sort the HTML table, but getting the error. Is there anything I am doing wrongly?
I want to able to sort ascending and descending. I am using useMemo. To make it, I am sorting on search return called searchPosts and I have sortType and setSortType defined in my useState.
import React, {useState, useEffect, useMemo} from 'react'
import '../css/about.css';
import Pagination from '../components/Pagination'
function About() {
const [userData, setUserData] = useState([]);
const [loading , setLoading] = useState(false);
const [currentPage, setCurrentPage] = useState(1);
const [postsPerPage, setPostsPerPage] = useState(5);
const [search, setSearch] = useState("");
const [sortType, setSortType] = useState('asc');
async function getData()
{
let response = await fetch('https://api.github.com/users');
let data = await response.json();
return data;
}
//call getData function
getData()
.then(data => console.log(data)
);//
useEffect(() => {
setLoading(true)
getData()
.then(
data => {
setUserData(data) }
)
.catch(error => {
console.log(error);
})
}, [])
// Get current posts
const indexOfLastPost = currentPage * postsPerPage;
const indexOfFirstPost = indexOfLastPost - postsPerPage;
const currentPosts = userData.slice(indexOfFirstPost, indexOfLastPost);
// changd page
const paginate = (pageNumber) => setCurrentPage(pageNumber);
// Search Table
const handleFilterChange = e => {
setSearch(e.target.value)
}
// for search
function DataSearch(rows) {
const columns = rows[0] && Object.keys(rows[0]);
return rows.filter((row) =>
columns.some((column) => row[column].toString().toLowerCase().indexOf(search.toLowerCase()) > -1)
);
}
const searchPosts = DataSearch(currentPosts);
// **for Sorting**
const sorted = useMemo(() => {
if(!sortType) return searchPosts;
return searchPosts.slice().sort((a, b) => a[searchPosts].localeCompare(b[searchPosts]));
}, [searchPosts, sortType]);
return (
<div className="container">
<div>
<div>
<input value={search} onChange={handleFilterChange} placeholder={"Search"} />
</div>
<div> {loading }</div>
<table>
<thead>
<tr>
<th>id</th>
<th>avatar_url</th>
<th>events_url</th>
<th>followers_url</th>
<th>following_url</th>
<th>gists_url</th>
<th>gravatar_id</th>
<th>html_url</th>
<th>
login
<a onClick={() => setSortType("login")}> Sort by Login</a>
</th>
<th>node_id</th>
<th>organizations_url</th>
<th>received_events_url</th>
<th>repos_url</th>
<th>site_admin</th>
<th>starred_url</th>
<th>subscriptions_url</th>
<th>type</th>
<th>url</th>
</tr>
</thead>
<tbody>
{
sorted.map((item, index) => (
<tr key={index}>
<td>{item.id}</td>
<td>{item.avatar_url}</td>
<td>{item.events_url}</td>
<td>{item.followers_url}</td>
<td>{item.following_url}</td>
<td>{item.gists_url}</td>
<td>{item.gravatar_id}</td>
<td>{item.html_url}</td>
<td>{item.login}</td>
<td>{item.node_id}</td>
<td>{item.organizations_url}</td>
<td>{item.received_events_url}</td>
<td>{item.repos_url}</td>
<td>{item.site_admin}</td>
<td>{item.starred_url}</td>
<td>{item.subscriptions_url}</td>
<td>{item.type}</td>
<td>{item.url}</td>
</tr>
))
}
</tbody>
</table>
<Pagination postsPerPage={postsPerPage} totalPosts={userData.length} paginate={paginate} />
</div>
</div>
)
}
export default About
I saw from stackoverflow the sorting example and I copied it to work with the code I have already.

Answer 1

First locate this line
const [sortType, setSortType] = useState('asc');
change it to
const [sortType, setSortType] = useState(null);
Now go to, replace with the code below
const sorted = useMemo(() => {
if(!sortType) return searchPosts;
return searchPosts.slice().sort((a, b) => a[sortType].localeCompare(b[sortType]));
}, [searchPosts, sortType]);
The mistake you did was the searchPosts instead of sortType
Then in your table, go
<th>
login
<a onClick={() => setSortType("login")}> Sort by Login</a>
</th>
You shouldn't have any error.