React is arguably the best tool for building interactive user interfaces. Everything from its template language JSX to the ability to integrate with TypeScript – makes it a great tool for developing highly interactive apps that consistently perform at a scale. Best of all, its component-based design significantly cuts down on development so you can create fairly complex apps in a short amount of time.

So without further ado, let’s explore some dynamic features you can implement with React.

Expand / Collapse

In today’s world, content is everywhere. Sometimes web apps can have too much content and users may be confused by sheer amount of information. Expand / collapse feature is a perfect remedy that gives users essential information about every item on the page. Only if users deem it interesting they can expand and read more.

Every React component has a state that maintains values that might change throughout the lifecycle of a component. In simpler words, state values are useful to keep track of ‘current state of affairs’ in the web app. Is the dark mode switched on? What is the current value of user input? And so on. Implementing the expand / collapse feature is as simple as having a Boolean value that conditionally renders full contents of the page if its value is true.

Of course you will also need a button, or some element to click on, that flips the current value of the Boolean between true (shown) and false (hidden).

Finally, you need some way to conditionally render parts of the page that will only be shown after the component is expanded. This is easily achieved by using either a ternary operator or the ‘AND’ logical operator.

Another way to divert users' attention to important parts of the page is to set their scroll position. A feature like scroll to bottom of the page in React.

Dynamic validation

All web applications use forms to some extent. Forms are especially useful for collecting information about users, letting them register, and generally to create and maintain user database. However, user inputs are not always reliably accurate. There is a possibility of spam, or users making genuine mistakes and entering wrong values into the field. That’s why you need form validation. Even better, React allows you to implement dynamic validation, so all users are instantly evaluated against certain criteria.

Based on results of validation, you can display a feedback message to help users enter correct values. Or generally explain why validation failed. Possibilities are endless.

Dynamic validation usually involves onChange and/or onSubmit events. In case of controlled components, event handlers need to get value of inputs and store them in the state. Once stored as a normal JavaScript value, you can evaluate them against a set of criteria. This guide shows how to get value from inputs in React.

A basic form validation is easy to implement in React. But things get more complicated when you want to verify multiple input fields, or you have complex criteria to verify them. In these cases, it’s best to use external supporting libraries like Formik.

Conditional Styling

Dynamically changing the appearance of some parts of your page is an important part of helpful UI. A simplest example would be the greying out of ‘Add to Cart’ button if the product is out of stock.

JSX makes it very easy to conditionally style elements. It also doesn’t hurt that React itself supports CSS-in-JS solutions. React allows you to set inline styles directly in JSX. Styles are organized as JavaScript objects, with CSS properties and values stored as key-value pairs in JavaScript objects. Except for minor changes to syntax, inline styles in React work the same way they do in CSS.

Template literals also allow you to set complex className values with dynamic parts inside them. As you know, template literals are basic JavaScript feature since ES6, denoted by backticks at the beginning and end. Between these backticks you can use dollar sign $ and pair of curly braces to include dynamic expressions. This can be a variable reference, or a dynamic operation.

Once again, there are plenty of libraries that help with conditional styling and setting conditional className values in React. The classnames() package is one of the most popular, and fairly easy to use. If your application needs complex set of rules, or you need to conditionally apply multiple className values, then it’s best to use a solution like classnames(). JSX also allows the use of ternary operators, but using it for complex if/else scenarios complicates code very fast.

Сonditional Rendering

Finally, another useful feature is to render (or not render) certain elements or components based on a condition. You can do this with nearly all web development frameworks, but JSX makes it especially easy to conditionally render parts of UI.

Conditional rendering has many use cases. One example is to render one of two buttons depending on user’s current authentication status. Authenticated users are logged in, so they should see ‘Log Out’ button. Logged out users are the opposite, and should be given the option to log in. This is a simple example that illustrates the power of conditional rendering with React.

JavaScript (and JSX) give us a number of tools to implement this feature. The shortest and cleanest way is to use the logical && operator, which takes two expressions on either side. If the first expression evaluates as true, then the && operator executes the second expression. For example, here’s the code if you want to display LogInButton only if the component is currently logged out.

{loggedOut && <LoginButton />}

In this case JavaScript will evaluate loggedOut state variable and will invoke the LoginButton component if the state variable is true. Note that curly braces inside JSX are necessary to embed any dynamic expressions. Without them JSX would interpret the logical operator as normal content to display.

Another way to render conditionally is via ternary operators. As their name suggests, ternary operators accept three arguments – first the condition to check, followed by question mark, and then followed by expression for when that condition is true.

It’s probably easier to understand by looking at syntax:

condition ? <OneComponent /> : <SecondComponent />

In this example, the value of condition will determine which component gets rendered. Overall, ternary operator is extremely useful in JSX, but gets complicated with complex conditions.

Final words

These are just some of the many common interactive features you can implement with React. The library has large community of developers, so it's unlikely you will have to implement these on your own.