<NME> predicates.md
<BEF> # Predicates in React Collection Helpers

Many React Collection Helpers ([`<Filter>`](#filter), [`<Find>`](#find), [`<Every>`](#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.


### Predicates in general

Don't let the word `predicate` scare you. A predicate is simply a function that returns a boolean value.

For example, the following predicate will allow us to determine whether an item in a list is within our budget:

```jsx
const items = [
  { name: 'apple', price: 1.00 },
  { name: 'banana', price: 5.00 },
  { name: 'bugatti veyron', price: 1695000.00 },
]

const isWithinBudgetPredicate = item => item.price < 1000;
```

In this ridiculous example, we have a thousand bucks, so we can afford some fruit but not a supercar.

We can apply this predicate with several different functions, in vanilla JS:

```jsx
const allAffordableItems = items.filter(isWithinBudgetPredicate);
// -> [{ name: 'apple', price: 1.00 }, { name: 'banana', price: 5.00 }]

const firstAffordableItem = items.find(isWithinBudgetPredicate);
// -> { name: 'apple', price: 1.00 }
```

### Predicates in React Collection Helpers

We use predicates in much the same way:

```jsx
const items = [
  { name: 'apple', price: 1.00 },
  { name: 'banana', price: 5.00 },
  { name: 'bugatti veyron', price: 1695000.00 },
]

const isWithinBudgetPredicate = item => item.price < 1000;

<Filter collection={items} predicate={isWithinBudgetPredicate}>
  {item => <div key={item.name}>{item.name} - ${item.price}</div>}
</Filter>
/*
<div>
  <div>apple - $1.00</div>
  <div>banana - $5.00</div>
</div>
*/

<Find collection={items} predicate={isWithinBudgetPredicate}>
  {item => <div key={item.name}>{item.name} - ${item.price}</div>}
</Find>
/*
<div>
  <div>apple - $1.00</div>
</div>
*/
```


### Object Short-hand

Instead of passing a function, you can pass it an object that describes your requirement:

```jsx
const items = [
  { name: 'apple', price: 1.00, isOnSale: false },
  { name: 'banana', price: 2.50,  isOnSale: true },
  { name: 'bugatti veyron', price: 500000, isOnSale: true },
];

<Filter collection={items} predicate={{ isOnSale: true }}>
  {item => <div key={item.name}>{item.name} - ${item.price}</div>}
</Filter>

/*
<div>
  <div>banana - $2.50</div>
  <div>bugatti veyron - $500000</div>
</div>
*/

```

This is often a more declarative way to present a predicate, if you're testing for a specific object value. Under the hood, it creates a predicate function based on this object and applies it in the same way.

<MSG> Fix links in doc guides

<DFF> @@ -1,6 +1,6 @@
 # Predicates in React Collection Helpers
 
-Many React Collection Helpers ([`<Filter>`](#filter), [`<Find>`](#find), [`<Every>`](#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.
+Many React Collection Helpers ([`<Filter>`](https://github.com/joshwcomeau/react-collection-helpers#filter), [`<Find>`](https://github.com/joshwcomeau/react-collection-helpers#find), [`<Every>`](https://github.com/joshwcomeau/react-collection-helpers#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.
 
 
 ### Predicates in general

{'commit': "diff --git a/documentation/comparators.md b/documentation/comparators.md\nindex 6a193f7..7eeabc1 100644\n--- a/documentation/comparators.md\n+++ b/documentation/comparators.md\n@@ -1,6 +1,6 @@\n # Comparators in React Collection Helpers\n \n-The [`<Sort>`](#sort) Collection Helper takes a comparator as an argument. This guide explains how that works, and what's supported.\n+The [`<Sort>`](https://github.com/joshwcomeau/react-collection-helpers#sort) Collection Helper takes a comparator as an argument. This guide explains how that works, and what's supported.\n \n ### Comparators in general\n \n@@ -154,7 +154,7 @@ However, what if you wanted to sort _descending_ instead of _ascending_? Using t\n \n Thankfully, you can add the `descending` prop to specify a descending order, when using the string short-hand:\n \n-```js\n+```jsx\n const items = [\n   { id: 'a', name: 'apple', price: 1 },\n   { id: 'b', name: 'banana', price: 5 },\ndiff --git a/documentation/predicates.md b/documentation/predicates.md\nindex 9b0c59c..bd8e52a 100644\n--- a/documentation/predicates.md\n+++ b/documentation/predicates.md\n@@ -1,6 +1,6 @@\n # Predicates in React Collection Helpers\n \n-Many React Collection Helpers ([`<Filter>`](#filter), [`<Find>`](#find), [`<Every>`](#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.\n+Many React Collection Helpers ([`<Filter>`](https://github.com/joshwcomeau/react-collection-helpers#filter), [`<Find>`](https://github.com/joshwcomeau/react-collection-helpers#find), [`<Every>`](https://github.com/joshwcomeau/react-collection-helpers#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.\n \n \n ### Predicates in general\n", 'commit_subject': 'Fix links in doc guides', 'repo_name': 'joshwcomeau/react-collection-helpers', 'committer': {'name': 'Joshua Comeau', 'email': '283a60aff57a3e1c8a26f7a7942fa4c9f57bf8e4@gmail.com', 'time_sec': '1485261914', 'tz_offset': '-300', 'date': {'seconds': '1485261914'}}, 'commit_tree': '4b130fb63c6ef07d71ab515a7d15abc0858d0c70', 'commit_message': 'Fix links in doc guides\n', 'language_name': 'JavaScript', 'license': 'mit', 'hunks': '@@ -1,6 +1,6 @@\n # Predicates in React Collection Helpers\n \n-Many React Collection Helpers ([`<Filter>`](#filter), [`<Find>`](#find), [`<Every>`](#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.\n+Many React Collection Helpers ([`<Filter>`](https://github.com/joshwcomeau/react-collection-helpers#filter), [`<Find>`](https://github.com/joshwcomeau/react-collection-helpers#find), [`<Every>`](https://github.com/joshwcomeau/react-collection-helpers#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.\n \n \n ### Predicates in general\n', 'addition_count': 1, 'deletion_count': 1, 'src_file': 'a/documentation/predicates.md', 'tgt_file': 'b/documentation/predicates.md', 'file_extension': '.md', 'before_file': "# Predicates in React Collection Helpers\n\nMany React Collection Helpers ([`<Filter>`](#filter), [`<Find>`](#find), [`<Every>`](#every), and more) use a `predicate` prop to determine whether an item in a collection matches or not.\n\n\n### Predicates in general\n\nDon't let the word `predicate` scare you. A predicate is simply a function that returns a boolean value.\n\nFor example, the following predicate will allow us to determine whether an item in a list is within our budget:\n\n```jsx\nconst items = [\n  { name: 'apple', price: 1.00 },\n  { name: 'banana', price: 5.00 },\n  { name: 'bugatti veyron', price: 1695000.00 },\n]\n\nconst isWithinBudgetPredicate = item => item.price < 1000;\n```\n\nIn this ridiculous example, we have a thousand bucks, so we can afford some fruit but not a supercar.\n\nWe can apply this predicate with several different functions, in vanilla JS:\n\n```jsx\nconst allAffordableItems = items.filter(isWithinBudgetPredicate);\n// -> [{ name: 'apple', price: 1.00 }, { name: 'banana', price: 5.00 }]\n\nconst firstAffordableItem = items.find(isWithinBudgetPredicate);\n// -> { name: 'apple', price: 1.00 }\n```\n\n### Predicates in React Collection Helpers\n\nWe use predicates in much the same way:\n\n```jsx\nconst items = [\n  { name: 'apple', price: 1.00 },\n  { name: 'banana', price: 5.00 },\n  { name: 'bugatti veyron', price: 1695000.00 },\n]\n\nconst isWithinBudgetPredicate = item => item.price < 1000;\n\n<Filter collection={items} predicate={isWithinBudgetPredicate}>\n  {item => <div key={item.name}>{item.name} - ${item.price}</div>}\n</Filter>\n/*\n<div>\n  <div>apple - $1.00</div>\n  <div>banana - $5.00</div>\n</div>\n*/\n\n<Find collection={items} predicate={isWithinBudgetPredicate}>\n  {item => <div key={item.name}>{item.name} - ${item.price}</div>}\n</Find>\n/*\n<div>\n  <div>apple - $1.00</div>\n</div>\n*/\n```\n\n\n### Object Short-hand\n\nInstead of passing a function, you can pass it an object that describes your requirement:\n\n```jsx\nconst items = [\n  { name: 'apple', price: 1.00, isOnSale: false },\n  { name: 'banana', price: 2.50,  isOnSale: true },\n  { name: 'bugatti veyron', price: 500000, isOnSale: true },\n];\n\n<Filter collection={items} predicate={{ isOnSale: true }}>\n  {item => <div key={item.name}>{item.name} - ${item.price}</div>}\n</Filter>\n\n/*\n<div>\n  <div>banana - $2.50</div>\n  <div>bugatti veyron - $500000</div>\n</div>\n*/\n\n```\n\nThis is often a more declarative way to present a predicate, if you're testing for a specific object value. Under the hood, it creates a predicate function based on this object and applies it in the same way.\n", 'message': 'Fix links in doc guides\n', 'author_name': 'Joshua Comeau', 'lang': 'md'}