Yogesh Chauhan's Blog

Composing and Extracting Components in React

in React on April 25, 2021

Composing Components

One your create React components, you can refer them in other components too. That way you can divide a component when it gets complex and make smaller components.

You can have a complete form component with smaller components like buttons, textboxes, etc.

For e.g. here’s one component referring another component.

Extracting Components

As I mentioned, if you think your React component is getting too big and complex that it’s hard to keep track of everything then you can just divide it in smaller components for simplicity.

Take a look at this example:


The same example with extracted Avatar component:


Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to Use ROLLUP Operator in SQL and MySQL?SQL/MySQLCreate a simple bar chart and column chart using pure CSS gridCSSCreate a responsive pricing table using simple HTML and CSSCSSHow to swap images on hover using CSS?CSSHow to add Google Static Map using ACF map field?WordPressControl rendering using CSS content-visibility propertyCSSControl Scrolling with CSS Scroll SnapCSSDoes :is() pseudo selector hint at CSS preprocessing in the future?CSSHow to add before after image effect using pure CSS?CSSWhat is Host Hardening and What are some Important Hardening Steps?MiscellaneousAngular 9 time clock update every minute, second, hourAngularConditional operator in JavaScript (aka ternary operator)JavaScript