Status of the array not updated with Sort

Question

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}
     />
 ))}

Answer 1

I decided to make a minimum example of sorting by field value, where your order starts from the smallest to the largest and when pressing the button changes from the largest to the smallest value:

function App() {
  const [tarefas, setTarefas] = React.useState([
    {'id': 1, 'desc': 'Tarefa 1', 'value': 5},
    {'id': 2, 'desc': 'Tarefa 2', 'value': 3},
    {'id': 3, 'desc': 'Tarefa 3', 'value': 4},
    {'id': 4, 'desc': 'Tarefa 4', 'value': 1},
    {'id': 5, 'desc': 'Tarefa 5', 'value': 2},
  ]);
  const [sort, setSort] = React.useState('A');
  const changeSort = () => setSort(sort === 'A' ? 'D': 'A');
  const torder = tarefas.sort((a,b) => {
     const v1 = a.value;
     const v2 = b.value;
     return sort === 'A' ? v1 - v2 : v2 - v1;
 });
  return (
    <div>
      <ul>
      {torder
        .map((t, i) => (<li>{t.desc} - value: {t.value}</li>))
      }
      </ul>
      <button onClick={() => changeSort() }>
      {sort === 'A' ? 'Descendente': 'Ascendente'}
      </button>
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

A few more examples and related issues:

• Doubt about standard React class
• Best Pattern to manage React component status with Hooks
• onClick by Innerhtml React?
• Share state React Hooks
• Displaying data with React JS
• I cannot use defaultProps in React
• Counter does not update data on the page using Reactjs and useState(), only when I place a console.log() can I see the result