fruit-list.example.js

const FruitList = (() => {
  // Aqui, PRODUCT_LABELS passa a existir apenas dentro desse bloco,
  // o que na prática funciona igual a uma closure.
  const PRODUCT_LABELS = {
    456: { single: "Apple", plural: "Apples" },
    123: { single: "Banana", plural: "Bananas" },
    789: { single: "Oranges", plural: "Orangess" },
  };

  // O fato do nome interno ser o mesmo do nome externo é apenas para
  // fácil identificação. Isso poderia ser FruitListComponent, etc.
  const FruitList = ({ fruits }) => {
    return (
      <ul>
        {fruits
          .filter((fruit) => fruit.quantity > 0)
          .map((fruit) => (
            <li>
              {fruit.quantity === 1
                ? PRODUCT_LABELS[fruit.id].single
                : PRODUCT_LABELS[fruit.id].plural}
            </li>
          ))}
      </ul>
    );
  }

  return FruitList;
})();