A collection of react components that iterates over the each prop and renders the render prop. Demo
const users = [{ name: 'Victor π', age: 10 }]
<For each={users} render={
({ name, age }) => <p>{ name }, { age }</p>
}/>
You can use npm/yarn to install
npm install react-listable
<For
each={state.users}
loader={() => <div>loading</div>}
render={
({ name, age }) => <p>{ name }, { age }</p>
}/>
<Ul
className="list"
each={state.users}
setActive={({ name }) => name === 'Maria π'}
render={
({ name, age }) => <p>{ name }, { age }</p>
}/>
<Ol
className="list"
each={state.users}
render={
({ name, age }) => <p>{ name }, { age }</p>
}/>
See the full documentation and live examples at https://victorvoid.me/react-listable
The code is available under the MIT License.