React — create simple animated expander

Hi there! 👋 😊

Today, I was thinking about creating an animated expander in React and I came up with the following solution. 🔽

Before we start, I would highly recommend you to check out runnable examples for the solution on our website:
How to create simple animated expander in React

Effect of this short post:

Simple expander component in React
Simple expander component in React

In the example below, I’ve created a simple expander that displays Fruits 🍉 and Vegetables 🍅 lists on click event. I’ve used a modern approach that involves the use of functional components and React hooks. In this case useState hook stores the state of my expander. 🔺🔻

Practical example:

You can run this example here.

Let me know if you like it or not in the comment section! 😊

Write to us!

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you’re looking for a mentoring write to us on -> Questions — we help you to solve coding problems ✔️🚀. Ask question