@ferstack/react-for
v1.0.1
Published
This package provides a utility component that simplifies the usage of .map() function in React. It allows you to iterate over an array of items and render a component for each item, with the flexibility of providing a fallback component in case the array
Downloads
11
Readme
For Component for React
This package provides a utility component that simplifies the usage of .map() function in React. It allows you to iterate over an array of items and render a component for each item, with the flexibility of providing a fallback component in case the array is empty and also automatically assign keys with the identifier prop.
Install
You can add this component to your project by simply copying the code above into a new .tsx
file in your project. There are no additional dependencies needed.
Usage
Here's an example of how to use the For
component:
import { For } from './For';
const fruits = ['Apple', 'Banana', 'Cherry'];
function App() {
return (
<For each={fruits} fallback={<div>No fruits found.</div>}>
{(fruit, index) => (
<div key={index}>{fruit}</div>
)}
</For>
);
}
export default App;
In this example, the For
component will render a div
for each fruit in the fruits
array. If the array were empty, it would render the "No fruits found." message.
Using the identifier prop:
import { For } from './For';
const people = ['John', 'Luke', 'Matthew'];
function App() {
return (
<For each={fruits} fallback={<div>No fruits found.</div>}>
{(fruit) => <p>{fruit}</p>}
</For>
);
}
export default App;
API
Props
each
(required): An array of items to iterate over. Each item will be passed to the child function as an argument.children
(required): A function that returns a JSX element. This function will be called once for each item in theeach
array, and it receives the current item and its index as arguments.identifier
(optional): A string that will be used to generate a unique key for each child component. The key will be a concatenation of the identifier and the index. This prop is recommended when yourchildren
don't have stable keys.fallback
(optional): A JSX Element that will be rendered in case theeach
array is empty.
Why use this?
If you often find yourself mapping over arrays to render lists of components in React, this utility component can help you reduce boilerplate and keep your code cleaner and easier to read. It also handles edge cases like empty arrays and missing keys, so you don't have to worry about them.