React Compound Components Design Pattern | Tabs and Accordion Components | Hindi | Part-4

React Compound Components Design Pattern | Tabs and Accordion Components | Hindi | Part-4

In this video, I have explained compound component design patterns with the help of examples. I have taken Tabs and Accordion examples to explain this topic.

⏰ Timecodes ⏰
0:00 Introduction
0:27 Add bootstrap to the project
1:27 Maintain state with Context
4:27 Create Tab context
10:07 Conclusion

Github project:

Compound components design pattern:

The compound component is an advanced React design pattern that helps to communicate between UI components and share states between components.
It helps to build flexible APIs to share state and logic between parent
and child components.
We will use React Context API for this.

In simple words:
Multiple components work together to share state and handle logic together.

How it Works:
1. The Parent component has some states.
2. Using React Context API, we share states between child components.
3. Child component uses the share method and state to communicate between components.

Tabs onChange={onChangeFun}
TabPanel Panel 1 /TabPanel
TabPanel Panel 2 /TabPanel

option value="option1"option1option
option value="option2" option2 /option

Here select tag works together with the option tag. Select tag manage the state
of the UI and share state with option element.

Accordion example same like this -
Toggle button with show text on/off


Support my channel:

(Free Courses)
React course :-
Javascript course :-
Typescript course :-
Frontend Interview Questions and Answer -
HTML Tutorial for Beginners to advance -
Remix run React framework Tutorial in Hindi -

(Social Media Links)
Twitter :
Facebook page :
Telegram :
LinkedIn :

About Me:-
I am Anuj Singla, and working as a Senior Software Engineer at Redhat. At Redhat, I spend most of my days writing code. I am working on different technologies like React, Angular, JavaScript, NodeJs, Typescript. I want to teach web development to everybody.

Tags :-
#reactdesignpattern #react #compoundcomponent #anujsingla #typescript #hindi #html #css
Web design
Be the first to comment