Untitled

return (
      <div style={{ width: "100%" }}>
        <h3>Summary</h3>
        <table>
          <tbody>
            <tr>
              <td>Project Name</td>
              <td>{projectName.value}</td>
            </tr>
            <tr>
              <td>Region</td>
              <td>{chosenRegion}</td>
            </tr>
            <h3>Deployment Details</h3>
            {createVPC.value == true
              ? this.renderNoInstances()
              : this.renderInstancesIds()}
            <tr>
              {createSecurityGroup.value ? (
                <>
                  <td>Create ALB Security Group</td>
                  <td>Yes</td>
                </>
              ) : (
                <>
                  <td>Existing Security Group Id</td>
                  <td>{sgid.value}</td>
                </>
              )}
            </tr>
          </tbody>
        </table>
      </div>
    );
  }

  renderNoInstances() {
    const {} = this.state;
    return (
      <>
        <tr>
          <td>Subenets IdS</td>
          <td>New subnets Ids</td>
        </tr>
        <tr>
          <td>Instances IdS</td>
          <td>New Webservers Ids</td>
        </tr>
      </>
    );
  }

  renderInstancesIds() {
    const { createInstances, instancesIds, subnetsIds } = this.state;
    return (
      <>
        <tr>
          <td>Subenets IdS</td>
          <td>{subnetsIds.value}</td>
        </tr>
        {/* here should be a condition or create instances ? */}
        <tr>
          {createInstances.value ? (
            <>
              <td>Create INstances</td>
              <td>Yes</td>
            </>
          ) : (
            <>
              <td>Existing Instances IDS</td>
              <td>{instancesIds.value}</td>
            </>
          )}
        </tr>
      </>
    );
  }
}