const App = () => {
  const [ users, setUsers ] = React.useState([]);;
  const [ state, setState ] = React.useState(false);

  const getUsers = async() => {
    const { data } = await axios.get('https://randomuser.me/api/?results=10');
    setUsers(data.results);
  }

  React.useEffect(() => {
    getUsers();
  }, []);

  const filterUsers = React.useMemo(() => {
    return users.sort((a, b) =>  {
      if(state) {
        return a.dob.age < b.dob.age ? 1 : -1
      }
      return a.dob.age > b.dob.age ? 1 : -1
    });
  }, [ state ])

  return (
    <div>
      <button onClick={ () => setState(true) } className="border-4 border-indigo-500">年齡大到小</button>
      <button onClick={ () => setState(false) }className="border-4 border-indigo-500 ml-4">年齡小到大</button>
      <hr className="my-4"/>
      <ul>
        {
          filterUsers.map((user, index) => (
            <li key={ user.email }>
              { `Name：${user.name.title}.${user.name.first } ${user.name.last}, Age：${user.dob.age}` }
            </li>
          ))
        }
      </ul>
    </div>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);