Cadre is rethinking decades-old practices in the real estate industry. Phone calls, paper documents, and a hike to the bank don’t keep you from investing in the stock market, and they shouldn’t keep you from investing in alternative assets either.

It’s only fitting, then, that while moving a legal document signing process online, we were slowed down by a concept as old as the GUI itself: the form. Displaying a few simple inputs is easy, but wiring up several dozen, each with complex validation and conditional display logic? That’s when we outgrew even our well-encapsulated React components.

Of course, we’re not the first team to ask a lot of the humble <form>. There are dozens of libraries that purport to solve these problems, but most fall short. We eventually found tcomb-form, which uses runtime types to generate React forms on the fly. One year later, tcomb-form powers nearly every input on our site. We like it so much that we even released our own addition to the tcomb ecosystem: tcomb-builder, an immutable builder syntax for defining tcomb types and forms.

But despite our growing reliance on tcomb in the last year, it wasn’t until recently that we took advantage of one of its slickest features: conditionally displaying fields with the union type. It’s powerful, you need it, and here’s why.

Conditional Logic

As a motivating example, consider a form on our site that asks for the investor’s bank location (required by “Know Your Customer” regulations). The logic is simple: Show the city and state fields only if the selected country is “United States.” Otherwise hide them.

How might this look in React? To oversimplify, something like this:

Even while coding up this dummy example, a few thoughts came to mind: How do I validate both layouts? How do I store and update my switch, isUSA? When I build a similar page, can I reuse my solutions to the prior two problems?

In response to these questions and more, tcomb-form has a single, emphatic reply: use a type system! In this particular case, the union type.

The bank location form has two possible layouts. Let’s call them international and us (as in United States). Both have a country input; us also has city and state. In tcomb, these two options, us and international, are defined as types.

The international type only has a country field, shown here using tcomb-builder syntax.

CountriesBuilder—imported from elsewhere—is an enum of countries (the data model) rendered as a dropdown (the view).

Every tcomb-builder is immutable, so every .set method returns a new builder. Here, the us type is defined as the international type with additional fields for city and state.

Just like CountriesBuilder, UnitedStatesBuilder is an enum of states rendered as a dropdown.

Finally, the union type is either the international type or the us type. How does the union know which is which? We tell it with the dispatch function, below defined to return the us type if the selected country is the United States (‘US’) and the international type otherwise.

All the hard parts — from showing and hiding the actual React components to calling validation functions associated with each form — are handled by tcomb-form.

Here’s all of the code together:

To render the form, just use tcomb-forms’s component.

Other Applications

Here are a some other ways we use union types on our site:

Fast follow Questions

An address that can be the same as a previous one

Wrapping Up

It’s readily apparent that the tcomb ecosystem — tcomb, tcomb-validation, and tcomb-form — is well designed from its basic building blocks (runtime types) to its user-facing conclusions (e.g. conditional forms). Using a union type to drive a conditional form is just one example of the many good ideas in these libraries.

This firm foundation is also what makes tcomb-builder, our immutable builder syntax for tcomb, possible. While the syntax in these examples comes from tcomb-builder, vanilla tcomb and tcomb-form could have been used instead. Our team just found that using immutable builders results in more maintainable code than vanilla tcomb-form’s mutable JSON blobs. Ultimately, everything “compiles” (in the simplest sense of the word) to tcomb and React.

And that, in the end, is its magic. Tcomb asks you to buy theory rather than configuration. It gives you building blocks rather than prefabricated components. How you use it and what you build is up to you.

Interested in joining our team and solving challenges like these? Check out our Careers site.

Disclaimer

Educational Communication

The views expressed above are presented only for educational and informational purposes and are subject to change in the future. No specific securities or services are being promoted or offered herein.

Not Advice

This communication is not to be construed as investment, tax, or legal advice in relation to the relevant subject matter; investors must seek their own legal or other professional advice.

Performance Not Guaranteed

Past performance is no guarantee of future results. Any historical returns, expected returns, or probability projections are not guaranteed and may not reflect actual future performance.

Risk of Loss

All securities involve a high degree of risk and may result in partial or total loss of your investment.

Liquidity Not Guaranteed

Investments offered by Cadre are illiquid and there is never any guarantee that you will be able to exit your investments on the Secondary Market or at what price an exit (if any) will be achieved.

Not a Public Exchange

The Cadre Secondary Market is NOT a stock exchange or public securities exchange, there is no guarantee of liquidity and no guarantee that the Cadre Secondary Market will continue to operate or remain available to investors.

Opportunity Zones Disclosure

Any discussion regarding “Opportunity Zones” ⁠— including the viability of recycling proceeds from a sale or buyout ⁠— is based on advice received regarding the interpretation of provisions of the Tax Cut and Jobs Act of 2017 (the “Jobs Act”) and relevant guidances, including, among other things, two sets of proposed regulations and the final regulations issued by the IRS and Treasury Department in December of 2019. A number of unanswered questions still exist and various uncertainties remain as to the interpretation of the Jobs Act and the rules related to Opportunity Zones investments. We cannot predict what impact, if any, additional guidance, including future legislation, administrative rulings, or court decisions will have and there is risk that any investment marketed as an Opportunity Zone investment will not qualify for, and investors will not realize the benefits they expect from, an Opportunity Zone investment. We also cannot guarantee any specific benefit or outcome of any investment made in reliance upon the above.

Cadre makes no representations, express or implied, regarding the accuracy or completeness of this information, and the reader accepts all risks in relying on the above information for any purpose whatsoever. Any actual transactions described herein are for illustrative purposes only and, unless otherwise stated in the presentation, are presented as of underwriting and may not be indicative of actual performance. Transactions presented may have been selected based on a number of factors such as asset type, geography, or transaction date, among others. Certain information presented or relied upon in this presentation may have been obtained from third-party sources believed to be reliable, however, we do not guarantee the accuracy, completeness or fairness of the information presented.