When browsing any web application to consume content, it’s impossible to show users important information about every piece of content. But you don’t need to show the entire content. For instance, Netflix doesn’t show full information about every movie. It shows the category, director, length, and other important details. Users need to open the movie to actually watch it.
That’s the idea behind expand/collapse feature, which you can use to improve the UX of React apps. Without further ado, let’s talk about the basic steps to implement it in React.
How to expand and collapse in React
First, you need some way to toggle the current status of the content. This is usually a state variable with a Boolean value. If it’s false, then the content is collapsed. If it’s true, then the content is expanded. In most web applications, you have a button used to toggle content status. Or sometimes clicking the piece of content itself expands it. Buttons usually have an onClick event handler to toggle the state every time user clicks a button. Thus clicking a button one time might expand the content, and clicking it again will collapse it. This is how this feature is supposed to work.
Most often, you have a container with some parts that are conditionally expanded or hidden. To do this, you need one main container <div> that has content and another <div> container inside. Then you conditionally style the inner container to hide or show itself depending on the state variable. In the condition, you check the state variable. If and use inline styles display (or similar) to accomplish the desired result. Don’t forget that you need curly braces to embed JavaScript inside JSX.
Expand/collapse text
You can use similar principles (toggle state variable, event handlers) to expand and collapse div, list, and text. In the case of lists, you might need to slightly customize the map() method often used to render multiple elements and components based on arrays in React. As you know, map() accepts the index argument. If you want to render only the first 3 items of the list when the list is collapsed, you can add an if condition inside the map(). This way, map() will render only a few list items if the list is collapsed, and render all of them when the list is expanded.
You need to use a slightly different approach to expand and collapse a paragraph’s text. Instead of using map() and its index argument, you will use the slice() method to return only a certain number of characters from a string. More specifically, you need a ternary operator that checks the current value of the toggle state variable. If it’s true, then the text needs to be expanded, and the ternary operator should return the full text. If it’s false, then it needs to return the first 20 or 30 characters of the string.
Hopefully, this was a good overview of how to implement expand/collapse feature in React. If you need advanced features like specifying animation and its speed, then using libraries like react-collapsed is a good idea. SimpleFrontEnd has a tutorial with many examples of how to implement expand/collapse in React.