Composing Components with props
Composing components with props involves passing props through attributes to the components, and these components are composed in another component. Passing props through attributes to a component is similar to passing arguments to a JavaScript function. Props are like data packets that are passed down to child components from parent component, which helps child components customize their information and appearnce accordingly.
Example : This example demonstrates the use of composing components with props.
Javascript
// App.js import React, { } from 'react' function App() { const Box1 = { backgroundColor: "blue", color: "white", padding: "10px 20px", width: "20px", height: "50px", }; const Box2 = { backgroundColor: "red", color: "white", padding: "12px 25px", width: "30px", height: "50px", }; return ( <div > <Box text="Box1" style={Box1} /> <Box text="Box2" style={Box2} /> </div> ); } export default App; |
Javascript
// Box.js import React from 'react' function Box(props) { return ( <div style={props.style}> {props.text} </div> ) } export default Box |
Output :
React JS Component Composition
Component composition in React involves the inclusion of one or more components in a single component, where each sub-component can further consist of additional components. Components in React are building blocks that are used to create user interfaces (UIs).
Table of Content
- What is a Component Composition in React?
- How can composition help performance?
- Composing Components with props
- Higher order components
- Render Props pattern
- Using Hooks in Component Composition
- Context API and Composition
- Compound Components
- Component Composition Patterns
- Containment Pattern
- Specialization Pattern
- Why Composition Wins Over Inheritance?
Contact Us