AbortController API in React_3

cancel-request.js

import axios from 'axios';
import { useState, useRef } from 'react';

function App() {
 let controller = useRef('').current;
 const [pictureUrl, setPictureUrl] = useState('');

 const getPicture = (e) => {
   e.preventDefault();
   controller = new AbortController();
   axios
     .get('https://randomuser.me/api/', {
       signal: controller.signal,
     })
     .then((res) => {
       setPictureUrl(res.data.results[0].picture.large);
     })
     .catch((err) => {
       console.log(err);
     });
 };

 const cancelRequest = (e) => {
   e.preventDefault();
   controller.abort();
 };
 return (
   <div
     style={{
       display: 'flex',
       alignItems: 'center',
       gap: '2rem',
       flexDirection: 'column',
       marginTop: '2rem',
     }}
   >
     <div style={{ display: 'flex', gap: '2rem' }}>
       <button onClick={getPicture}>Get Random Picture</button>
       <button onClick={cancelRequest}> Cancel Request</button>
     </div>

     <div>
       {pictureUrl !== '' ? <img src={pictureUrl} alt='random user' /> : null}
     </div>
   </div>
 );
}

export default App;