diff --git a/README.md b/README.md index 709802a..4abf231 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/). -_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) diff --git a/react/create-dynamically-named-custom-react-components.md b/react/create-dynamically-named-custom-react-components.md new file mode 100644 index 0000000..941e9c4 --- /dev/null +++ b/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 ( + {children} + ); +}; +``` + +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 ( + {children} + ); + }; + CustomComponent.displayName = customName; + + return ( + {children} + ); +}; + +const App = () => { + return ( + + Hello! + + ); +} +``` + +If we inspect the generated React tree, we will not see anything called +``, but instead we will see our `` +component. + +Remember, React components need to have an uppercase name.