title: Conditional Rendering with React-Hooks
body: <p><strong>1. Context</strong>
  <br />
  The code is used within a Sign Up page in order to conditionally render either a Sign Up form or a form into which to enter a Confirmation Code so that the user's email address can be confirmed. AWS Amplify is used to create the User Account within a User Pool, as well confirming the email address.
  <br />
  <br />
  <strong>2. Problem</strong>
  <br />
  Either form does not render when being called upon.
  <br />
  <br />
  <strong>3. All Additional Source Code</strong>
  <br />
  <a href="https://github.com/pimp-my-book/FDWA" rel="nofollow noreferrer">https://github.com/pimp-my-book/FDWA</a></p>
  
  <p><strong>4. Code</strong>
  <br /></p>
  
  <pre><code>import React, { useState } from "react";
  import Auth from "@aws-amplify/auth";
  import { Button, Form, Container, Col, Row } from "react-bootstrap";
  
  const SignUp = ( ) =&gt; {
      const [ username, setUsername ] = useState("");
      const [ password, setPassword ] = useState("");
      const [ confirmationCode, setConfirmationCode ] = useState("");
      const [ newUser, setNewUser ] = useState(null);
  
      const handleSubmit = async event =&gt; {
          event.preventDefault();
  
          try {
              const newUser = await Auth.signUp(username, password);
              console.log(newUser);
              setNewUser(newUser)
          }
          catch (e) {
              alert(e.message)
          }
      }
  
      const handleConfirmationSubmit = async event =&gt; {
          event.preventDefault();
  
          try {
              await Auth.confirmSignUp(username, confirmationCode);
              await Auth.signIn(username, password)
          }
          catch (e) {
              alert(e.message)
          }
      }
  
      const renderForm = () =&gt; {
          return(
            &lt;Container&gt;
                &lt;Row&gt;
                    &lt;Col&gt;
                      &lt;div&gt;
                          Sign Up
                      &lt;/div&gt;
                    &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;Row&gt;
                    &lt;Form onSubmit={ handleSubmit }&gt;
                      &lt;Form.Row&gt;
                          &lt;Form.Group controlId="sign-up-email"&gt;
                              &lt;Form.Label&gt;Email Address&lt;/Form.Label&gt;
                                  &lt;Form.Control
                                      type="email"
                                      placeholder="Please enter your email address here..."
                                      value={ username }
                                      onChange = { e =&gt; setUsername( e.target.value ) }
                                  /&gt;
                          &lt;/Form.Group&gt;
                      &lt;/Form.Row&gt;
                      &lt;Form.Row&gt;
                          &lt;Form.Group controlId="sign-up-password"&gt;
                              &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                                  &lt;Form.Control
                                      type="password"
                                      placeholder="Please enter your password here..."
                                      value={ password }
                                      onChange = { e =&gt; setPassword( e.target.value ) }
                                  /&gt;
                          &lt;/Form.Group&gt;
                      &lt;/Form.Row&gt;
                      &lt;Form.Row&gt;
                          &lt;Form.Group controlId="sign-up-password"&gt;
                              &lt;Button variant="primary" type="submit"&gt;
                                  Submit
                              &lt;/Button&gt;
                          &lt;/Form.Group&gt;
                      &lt;/Form.Row&gt;
                    &lt;/Form&gt;
                &lt;/Row&gt;
            &lt;/Container&gt;  
          );
      }
  
      const renderConfirmationForm = () =&gt; {
          return(
              &lt;Container&gt;
                  &lt;Row&gt;
                    &lt;Col&gt;
                      &lt;div&gt;
                          Confirmation Code
                      &lt;/div&gt;
                    &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;Row&gt;
                    &lt;Form onSubmit={ handleConfirmationSubmit }&gt;
                        &lt;Form.Row&gt;
                            &lt;Form.Group controlId="confirmation-code-input"&gt;
                                &lt;Form.Label&gt;We've sent a Confirmation Code to your Email Address -_-&lt;/Form.Label&gt;
                                  &lt;Form.Control
                                      type="text"
                                      placeholder="Please enter your Code here..."
                                      value={ confirmationCode }
                                      onChange={ e =&gt; setConfirmationCode( e.target.value ) }
                                  /&gt;
                            &lt;/Form.Group&gt;
                        &lt;/Form.Row&gt;
                        &lt;Form.Row&gt;
                            &lt;Form.Group controlId="confirmation-code-button"&gt;
                                &lt;Button variant="primary" type="submit"&gt;
                                    Confirm Your Code
                                &lt;/Button&gt;
                            &lt;/Form.Group&gt;
                        &lt;/Form.Row&gt;
                    &lt;/Form&gt;
                &lt;/Row&gt;
              &lt;/Container&gt;
          );
      }
  
      return (
          &lt;div&gt;
              {
                  newUser === null
                  ? &lt;renderForm/&gt;
                  : &lt;renderConfirmationForm/&gt;
              }
          &lt;/div&gt;
      );
  }
  
  export default SignUp
  </code></pre>