Add Create Dynamically Named Custom React Components as a react til

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/).
 
-_664 TILs and counting..._
+_665 TILs and counting..._
 
 ---
 
@@ -453,6 +453,7 @@ _664 TILs and counting..._
 - [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)
 - [Building A React App In The Browser](react/building-a-react-app-in-the-browser.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)
 - [Debug Jest Tests In create-react-app](react/debug-jest-tests-in-create-react-app.md)
 - [Defining State In A Simple Class Component](react/defining-state-in-a-simple-class-component.md)

react/create-dynamically-named-custom-react-components.md

@@ -0,0 +1,46 @@
+# Create Dynamically Named Custom React Components
+
+A React element is as simple as a function that returns some valid JSX. Any
+function will do.
+
+```javascript
+const CustomComponent = ({ children }) => {
+  return (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};
+```
+
+This function provides us with a React component that has a fixed name --
+`CustomComponent`. With the help of the [`displayName`
+property](https://reactjs.org/docs/react-component.html#displayname), we can
+create dynamically named components.
+
+```javascript
+const ComponentGenerator = ({ customName, children }) => {
+  const CustomComponent = ({ children }) => {
+    return (
+      <React.Fragment>{children}</React.Fragment>
+    );
+  };
+  CustomComponent.displayName = customName;
+
+  return (
+    <CustomComponent>{children}</CustomComponent>
+  );
+};
+
+const App = () => {
+  return (
+    <ComponentGenerator customName="RandomComponentName">
+      Hello!
+    </ComponentGenerator>
+  );
+}
+```
+
+If we inspect the generated React tree, we will not see anything called
+`<CustomComponent>`, but instead we will see our `<RandomComponentName>`
+component.
+
+Remember, React components need to have an uppercase name.