title: Showing / Hiding links based on criteria: React+Typescript
body: <p>I am having this scenario explained below:</p>
  
  <p>This is pertaining to a user who can have multiple accounts.The form fields for these accounts are displayed in a card format.So on Add account, one extra card gets displayed. On Remove, the same card gets removed</p>
  
  <p>1)If accounts are already there , then all should have 'Remove Account' and last one should have 'Save &amp; add another account' button</p>
  
  <p>2)If no data is present, first card should have 'save &amp; add another account' and after addition of that account , next card should have "Save &amp; Add another account" and then "Remove Account". Also first card should only have "Add Account"</p>
  
  <p>I have written a logic, that doesn't cover all the above cases.</p>
  
  <p>How can I improvise the logic?</p>
  
  <pre><code>import * as React from "react";
  import { render } from "react-dom";
  
  export default class App extends React.Component&lt;{}, IState&gt; {
    addButtonClicked: boolean = false;
  
    constructor(props: any) {
      super(props);
      this.state = {
        accounts: [{ firstname: "", lastname: "", age: "" }]
      };
    }
    onAddAccount = (index: number) =&gt; {
      this.addButtonClicked = true;
      //adding accounts will be done here
    };
  
    renderAccounts = (accounts: Account[], removeButtonFlag: boolean) =&gt; {
      return accounts.map((value, index) =&gt; {
        return (
          &lt;div key={index}&gt;
            &lt;div&gt;
              &lt;div&gt;
                &lt;h5&gt;
                  New Account{" "}
                  {this.addButtonClicked &amp;&amp; removeButtonFlag ? (
                    &lt;span&gt;{index + 1}&lt;/span&gt;
                  ) : (
                    ""
                  )}
                &lt;/h5&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div&gt;
              &lt;form&gt;
                &lt;label&gt;First Name:&lt;/label&gt;
                &lt;input
                  type="text"
                  name="firstname"
                  value={value.firstname}
                  onChange={e =&gt; this.handleChange(e, index)}
                  required
                /&gt;
                &lt;label&gt;Last Name:&lt;/label&gt;
                &lt;input
                  type="text"
                  name="lastname"
                  value={value.lastname}
                  onChange={e =&gt; this.handleChange(e, index)}
                /&gt;
                &lt;label&gt;Age:&lt;/label&gt;
                &lt;input
                  type="text"
                  name="age"
                  value={value.age}
                  onChange={e =&gt; this.handleChange(e, index)}
                  required
                /&gt;
                &lt;div&gt;
                  {this.addButtonClicked &amp;&amp; (removeButtonFlag &amp;&amp; index === 0) ? (
                    ""
                  ) : (
                    &lt;button onClick={() =&gt; this.onAddAccount(index)}&gt;
                      Save &amp; Add Another Account{" "}
                    &lt;/button&gt;
                  )}
                  {removeButtonFlag &amp;&amp; index &gt; 0 ? &lt;span&gt;|&lt;/span&gt; : ""}
                  {removeButtonFlag ? (
                    &lt;button onClick={() =&gt; this.removeAccount(index)}&gt;
                      Remove Account
                    &lt;/button&gt;
                  ) : (
                    ""
                  )}
                &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        );
      });
    };
  
    render() {
      const { accounts } = this.state;
      let removeButtonFlag: boolean = false;
      if (Object.keys(accounts).length &gt; 1) {
        removeButtonFlag = true;
      }
  
      return &lt;div&gt;{this.renderAccounts(accounts, removeButtonFlag)}&lt;/div&gt;;
    }
  }
  
  }
  
  </code></pre>