0
I’m pulling an array with a user’s repositories on github and need to sort according to the number of stars, with the option of increasing and decreasing.
I thought: when the user clicks on the button will be called a function that applies a sort()
and then changes the state using the useState
. I tested this using a hardcoded array and it worked, however, on the data pulled from the api is not rolling. Any idea how to solve this?
Here’s the code that’s pulling the data:
const [repoList, setRepoList] = useState([]);
useEffect(() => {
async function fetchData() {
const response = await axios.get(
` https://api.github.com/users/${id}/repos`
);
setRepoList(response.data);
}
fetchData();
}, [id]);
Here the code of the function of sort
function lowerStarOrder() {
repoList.sort((a, b) => {
if (a.stargazers_count > b.stargazers_count) {
return 1;
}
if (a.stargazers_count < b.stargazers_count) {
return -1;
}
if (a.stargazers_count === b.stargazers_count) {
return 0;
}
});
setRepoList(repoList);
}
and here the JSX code
{repoList.map((repo) => (
<RepositoryHeader
key={repo.id}
github={repo.html_url}
details={`/details/${repo.full_name}`}
repositoryName={repo.name}
language={repo.language}
value={repo.stargazers_count}
/>
))}
Thank you very much! It worked perfectly!
sort
makes. Thanks for the reference material too, it was of great help!– buenojc