Сортировка поля по количеству населения React, куда подставить сортировку?

Question

[vladislavprozorovskiy]

Нужно отсортировать таблицу по строке популяция, по клику на Population . данные приходят с API, я их "вытащил" через axios, таблица отображается, но не знаю как отсортировать данные(по клику), которые приходят извне, а не статические.Вот мой код

import React, { Component } from 'react';
import axios from 'axios';
import './App.css';

class App extends Component {
  constructor(props){
  	  super(props)
	  this.state={
	  	  countries:[],
		  
	  }
  }

  componentDidMount(){
  	  axios.get('https://restcountries.eu/rest/v2/all')
	  .then(response => {
	  	  this.setState({
		    
		  	  countries:response.data
			 
		  })
	  })
	  .catch((error) => {
	  	  console.log("error", error)
	  })
  }

  render(){
  	  return(
	  	  
		  <div className = 'table'>
		  
		  <table>
		  <tbody>
		  <tr>
		  <th>Country name </th>
		  <th>Currencies</th>
		  <th>Region </th>
		  <th>Flag </th>
		  <th >Population</th>
		  <th>Languages</th>
		  
		  </tr>
		  {
		  	 this.state.countries.map((country,id) => {
			  	  return(
				  
				  	  <tr className="tableRow">
					 <td> {country.name}</td>
					 <td>{country.currencies.map((currency,i)=>{
					 return (
					 
					 <p>
					 	 <span>{currency.name} </span>
						 
						 <span>{currency.symbol} </span>
						 </p>
						 
					 )
					 })} </td>
					 <td> {country.region}</td>
					 <td> <img src={country.flag} alt={country.denonym}/> </td>
					 <td> {country.population} </td>
					 <td> {country.languages.map((language)=>{
					 return (
					 	 <span> {language.name} </span>
					 )
					 })} </td>
					  </tr>
		  
					  
				  )
				  
			  })
			  
		  }
		  </tbody>
		  
		  </table>
		  </div>
		  
	  )
  }
}

export default App;

Answer 1

[Виталий]

clickHandler(){
this.setState(... здесь берешь свой массив и сортируешь по тому значению что надо и обновляешь стейт)
}