How to use a custom component In ReactJS
Creating a custom component in React involves defining a reusable function or class component to encapsulate specific functionality. This custom component can accept props to customize its behavior and appearance. Using custom components enhances code readability, promotes reusability, and simplifies the maintenance of React applications.
Example:
import React from 'react';
// Custom List
function List({ name }) {
return (
<li>{name}</li>
);
}
function ListComponent({ items }) {
const birds = ['Peacock', 'Bird', 'Pigeons',
'Hummingbird', 'Flamingo', 'Crow',
'Eagle', 'Parrot']
return (
<div>
<h2>Bird Name</h2>
<ul>
{birds.map((name, index) => (
<List name={name} key={index} />
))}
</ul>
</div>
);
}
export default ListComponent
Output:
List all ways to render a list of items in React
In React applications, rendering lists of items is a fundamental task. You will often need to display collections of data, such as product listings, to-do items, or user comments. There is well-established approach that combines JavaScript’s array methods and React’s component structure to achieve this efficiently.
Pre-requisites: