conditional display of social links

src/pages/EditProfile.tsx

@@ -1,4 +1,4 @@
-import React, {FC} from 'react';
+import React, {FC, useState} from 'react';
 import {Link} from 'react-router-dom';
 import Routes from '../constants/routes';
 // Style
@@ -33,6 +33,7 @@ interface InitFormData {
  * Form to update dev's personal information.
  */
 const EditProfile: FC = () => {
+  const [showLinks, setShowLinks] = useState(false);
   const initFormData = {
     status: '',
     company: '',
@@ -70,6 +71,8 @@ const EditProfile: FC = () => {
     e.preventDefault();
     console.log('Submitted');
   };
+
+  const revealSocialLinks = () => setShowLinks(true);
   return (
     <section className="container">
       <FormHeader
@@ -164,12 +167,18 @@ const EditProfile: FC = () => {
         </div>
 
         <div className="my-2">
-          <button type="button" className="btn btn-light">
+          <button
+            type="button"
+            className="btn btn-light"
+            onClick={revealSocialLinks}
+          >
             Add Social Network Links
           </button>
           <span>Optional</span>
         </div>
 
+        {showLinks && (
+          <>
             <div className="form-group social-input">
               <FontAwesomeIcon icon={faFacebook} size="2x" />
               <input
@@ -224,6 +233,8 @@ const EditProfile: FC = () => {
                 onChange={handleChange}
               />
             </div>
+          </>
+        )}
 
         <input type="submit" className="btn btn-primary my-1" value="Submit" />
         <Link to={Routes.DASHBOARD} className="btn btn-light my-1">