From 7f8b2ad78bba6b74129414d35bd5c2c3ff820c6f Mon Sep 17 00:00:00 2001
From: jbranchaud <jbranchaud@gmail.com>
Date: Tue, 6 Feb 2018 13:23:23 -0600
Subject: [PATCH] Add Alter The Display Name Of A Component as a react til

---
 README.md                                     |  3 ++-
 .../alter-the-display-name-of-a-component.md  | 25 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 react/alter-the-display-name-of-a-component.md

diff --git a/README.md b/README.md
index 684c56b..3aec71c 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/).
 
-_605 TILs and counting..._
+_606 TILs and counting..._
 
 ---
 
@@ -421,6 +421,7 @@ _605 TILs and counting..._
 ### React
 
 - [Accessing Env Vars In create-react-app](react/accessing-env-vars-in-create-react-app.md)
+- [Alter The Display Name Of A Component](react/alter-the-display-name-of-a-component.md)
 - [create-react-app Comes With Lodash](react/create-react-app-comes-with-lodash.md)
 - [Defining State In A Simple Class Component](react/defining-state-in-a-simple-class-component.md)
 - [Dispatch Anywhere With Redux](react/dispatch-anywhere-with-redux.md)
diff --git a/react/alter-the-display-name-of-a-component.md b/react/alter-the-display-name-of-a-component.md
new file mode 100644
index 0000000..fe232d5
--- /dev/null
+++ b/react/alter-the-display-name-of-a-component.md
@@ -0,0 +1,25 @@
+# Alter The Display Name Of A Component
+
+Components adopt their display name from the class or function that renders
+them. A component's display name becomes important to know about as soon as
+you start digging through the [React
+devtools](https://github.com/facebook/react-devtools) interface -- whether
+debugging or just perusing the component hierarchy, the display names of
+components is what you'll see. In most circumstances, the display name is
+good enough as is. If you want or need to, you can change it.
+
+```javascript
+const Hello = ({ name }) => {
+  return (
+    <h1>{name}</h1>
+  );
+};
+Hello.displayName = "Hola";
+```
+
+By setting the `displayName` property on this component, you are able to
+alter what name is used by React devtools.
+
+This can be useful when bringing in a 3rd party library or
+component that doesn't use a display name that you find helpful -- in
+particular when using Higher Order Components.