🌀 Say Hello to `ChousyEach` – The Cleanest Way to Render Lists in React

We’ve all been there: you're mapping over a list in React, juggling map(), conditionals, key props, and selection logic. Suddenly, your elegant UI turns into spaghetti 🍝.

Enter ChousyEach – the declarative, expressive, Rails-inspired way to iterate over arrays in JSX, now part of react-chousy!

---

✅ Basic Usage

import { ChousyEach } from 'react-chousy';

const fruits = ['🍎', '🍌', '🍇'];

<ChousyEach of={fruits}>
  {(fruit, idx) => <span>{fruit}</span>}
</ChousyEach>

Simple, clean, and readable. No more cluttered .map() + arrow + return + fragment soup.

---

🎯 Track Selection State (Built-In!)

Want to highlight the selected item? Just add trackSelection.

<ChousyEach of={fruits} trackSelection>
  {(fruit, idx, { selectedIdx, setSelectedIdx }) => (
    <button
      className={selectedIdx === idx ? 'font-bold text-blue-600' : 'text-gray-600'}
      onClick={() => setSelectedIdx(idx)}
    >
      {fruit}
    </button>
  )}
</ChousyEach>

Yes, it’s that simple.

---

📬 Listen for Changes

Need to react when the list changes?

<ChousyEach
  of={fruits}
  onChange={(list) => console.log('List changed:', list)}
>
  {(fruit) => <span>{fruit}</span>}
</ChousyEach>

Perfect for side effects, analytics, syncing, or fun debug logs.

---

🧭 Auto-highlight your nav like a pro

const menu = [
  { label: 'Home', path: '/' },
  { label: 'About', path: '/about' },
  { label: 'Contact', path: '/contact' }
];

<ChousyEach
  of={menu}
  navHighlight
  getPath={item => item.path}
  currentPath={window.location.pathname}
>
  {(item, idx, { isActive }) => (
    <a
      href={item.path}
      className={isActive ? 'text-blue-600 font-bold' : 'text-gray-500'}
    >
      {item.label}
    </a>
  )}
</ChousyEach>

The navHighlight + currentPath combo makes building active navbars ✨ effortless.

---

🚀 Why use ChousyEach?

• ⛅️ Cleaner than .map()
• 🎯 Selection state out-of-the-box
• 🧠 Smart path highlighting
• 🧪 Safe, typed, and testable
• ⚡️ Lightweight (like 300 bytes tiny)

---

📦 Get Started

npm install react-chousy

import { ChousyEach } from 'react-chousy';

---

🧠 Pro Tip

Use ChousyEach with other react-chousy components like ConditionalRender and SwitchCaseRender to level up your declarative UI game.

---

💬 What do you think?

Are you still writing array.map() in 2025? 😅

Drop your thoughts, suggestions, or memes in the comments 👇

---

📣 Created by @joelnbl