Hello! 👋 In this blogpost, Let's think how to create a simple SideBar component in ReactJS.

First of all, let's see the picture of what to build.

In order to build this component in React, we need to think how to build it. let's take a quick look on the approach.

Block Diagram

Block diagram contains the bigger picture of component / Declarative approach. we want to create SideBar component, such that it is reusable. It contain many tab inside it. which in turn is the Tab component, same tab component is reused inside the SideBar which avoid the repetition.

Now in order to understand, how the data flows. Let's look into Flow Diagram.

Flow Diagram

SideBar component is communicating with Tab component using activeTab and onTabClick props. activeTab holds the state of active tab. onTabClick prop will detect the target and make it active, in short the clicked tab will become active using onTabClick prop.

can check out the working link of this component SideBar component

Thanks for Reading !