# Thinking in ReactJS

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. 

![2021-10-15 19-51-42 (online-video-cutter.com).gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1634364916705/0ND4lvodc.gif)

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

![Side bar block diagram.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1634317282784/T8DUqDPSO.jpeg)

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

![Flow diagram.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1634361380794/R4PR_LIiL.jpeg)

`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](https://focused-montalcini-d59df3.netlify.app)

Thanks for Reading !