SHARE
TWEET

Untitled

a guest Sep 22nd, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { useState } from 'react';
  2. import axios from 'axios';
  3. import './App.css';
  4.  
  5. function App() {
  6.   const [email, setEmail] = useState('');
  7.   const [error, setError] = useState('');
  8.   const [isSubmitted, setSubmitted] = useState(false);
  9.   const [isProcessing, setProcessing] = useState(false);
  10.  
  11.   async function handleSubmit(e) {
  12.     e.preventDefault();
  13.     e.stopPropagation();
  14.  
  15.     try {
  16.       setProcessing(true);
  17.       await axios.post('/api/subscriptions', { email });
  18.       setSubmitted(true);
  19.     } catch (error) {
  20.       setSubmitted(true);
  21.       setError('server responded with error');
  22.     }
  23.   }
  24.  
  25.   if (isSubmitted) {
  26.     return (
  27.       <div className="App">
  28.         {
  29.           error
  30.             ? <p className="error">Failed to submit: {error}</p>
  31.             : <p className="success">Thank you! Email <b>"{email}"</b> has been added to the list.</p>
  32.         }
  33.       </div>
  34.     );
  35.   }
  36.  
  37.   return (
  38.     <div className="App">
  39.       <form onSubmit={handleSubmit}>
  40.         <input
  41.           type="email"
  42.           placeholder="Your email..."
  43.           value={email}
  44.           onChange={(e) => setEmail(e.target.value)}
  45.           disabled={isProcessing} />
  46.       </form>
  47.     </div>
  48.   );
  49. }
  50.  
  51. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top