From 95c8e8ac7868a4a336d0ac95335203342b88e922 Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Fri, 30 Aug 2019 13:50:12 -0500
Subject: [PATCH] Add Conditionally Including Event Handler Functions as a
 react til

---
 README.md                                     |  3 ++-
 ...nally-including-event-handler-functions.md | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 react/conditionally-including-event-handler-functions.md

diff --git a/README.md b/README.md
index 44ee89e..eeeb9ac 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_840 TILs and counting..._
+_841 TILs and counting..._
 
 ---
 
@@ -541,6 +541,7 @@ _840 TILs and counting..._
 - [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md)
 - [Building A React App In The Browser](react/building-a-react-app-in-the-browser.md)
 - [Check The Type Of A Child Component](react/check-the-type-of-a-child-component.md)
+- [Conditionally Including Event Handler Functions](react/conditionally-including-event-handler-functions.md)
 - [Create Dynamically Named Custom React Components](react/create-dynamically-named-custom-react-components.md)
 - [create-react-app Comes With Lodash](react/create-react-app-comes-with-lodash.md)
 - [create-react-app Has A Default Test Setup File](react/create-react-app-has-a-default-test-setup-file.md)
diff --git a/react/conditionally-including-event-handler-functions.md b/react/conditionally-including-event-handler-functions.md
new file mode 100644
index 0000000..ddf0364
--- /dev/null
+++ b/react/conditionally-including-event-handler-functions.md
@@ -0,0 +1,27 @@
+# Conditionally Including Event Handler Functions
+
+React makes a variety of [synthetic DOM
+events](https://reactjs.org/docs/events.html) available to your component.
+Events such as `onClick`, `onKeyPress`, `onSubmit`, etc. When specifying one of
+these event handlers, you must supply a function.
+
+To conditionally include an event handler, you may be tempted to do this:
+
+```javascript
+<Toggler
+  onKeyPress={someCondition && handleKeyPress}
+/>
+```
+
+This means that `onKeyPress` will receive `false` when `someCondition` is
+`false`. That is a prop type violation. Instead, you should use a ternary
+statement.
+
+```javascript
+<Toggler
+  onKeyPress={someCondition ? handleKeyPress : undefined}
+/>
+```
+
+If `someCondition` is `false`, then the prop will be set as `undefined` and
+that prop won't be defined.