<div id="readability-page-1" class="page"><article id="article-show-container" data-article-id="1435848" data-article-slug="the-dynamic-component-in-react-26ij" data-author-id="201866" data-author-name="Ukjin Yang" data-author-username="composite" data-co-author-ids="" data-path="/composite/the-dynamic-component-in-react-26ij" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false">
 <header id="main-title">

 <div>
 <a href="/composite"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i7tYDRmB--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/201866/5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Ukjin Yang"></a>
 
 
 </div>
 </header>

 <div data-article-id="1435848" id="article-body">
 Howdy React.js developers!

Let's recap The process of compile your <code>jsx</code> to <code>js</code> in React: 


<div>
<pre><code>export default function MyComponent() {
 return &lt;div&gt;Hello world!&lt;/div&gt;;
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>


↓ 

<div>
<pre><code>export default function MyComponent() {
 return React.createElement('div', {}, 'Hello world!');
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>


so, what? You have already seen dynamic component function. 
Behold, <a href="https://react.dev/reference/react/createElement"><code>React.createElement</code></a>!

It's easy to think of this function as just an API for people who don't like jsx, but it's still the core function for creating components. even dynamic components.

The purpose of creating a dynamic component is:

<ul>
<li>Headless component</li>
<li>Wrapper component</li>
</ul>

If you've used the MUI before, you've also used the <code>component</code> property on <code>Box</code>. This property allows you to apply the styling provided by the MUI to any component you want, or hard to style component like <code>&lt;Link&gt;</code>, <code>&lt;Image&gt;</code> in Next.js.

So, How to make dynamic component? just three lines, tada! 

<div>
<pre><code>export default function DynamicComponent({ component, children, ...others }) {
 return React.createComponent(component, others, children)
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>


Why not <code>jsx</code>? The <code>React.createComponent</code> is just a function. not component. but we've already achieved our goal by just three lines.

okay, next, let's look how to use: 

<div>
<pre><code>export default function DesiredComponent(props) {
 const { component, children, color, ...others } = props
 const style = { color }
 return &lt;DynamicComponent component={component || 'div'} {...others} style={style}&gt;{children}&lt;/DynamicComponent&gt;
}
</code></pre>
<div>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
 <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>


</div>
</div>


it's simple, right? 
I'm sure you'll be able to style your React app with dynamic components and wrap other components to make it even more elegant. 
Happy React-ing!

P.S. for Typescript users: 






 </div>
 
 



 </article></div>

Ukjin Yang

Howdy React.js developers!
Let's recap The process of compile your jsx to js in React:
export default function MyComponent() {
 return <div>Hello world!</div>;
}
↓
export default function MyComponent() {
 return React.createElement('div', {}, 'Hello world!');
}
so, what? You have already seen dynamic component function.
React.createElement!
It's easy to think of this function as just an API for people who don't like jsx, but it's still the core function for creating components. even dynamic components.
The purpose of creating a dynamic component is:
Headless component
Wrapper component
If you've used the MUI before, you've also used the component property on Box. This property allows you to apply the styling provided by the MUI to any component you want, or hard to style component like <Link>, <Image> in Next.js.
So, How to make dynamic component? just three lines, tada!
export default function DynamicComponent({ component, children, ...others }) {
 return React.createComponent(component, others, children)
}
Why not jsx? The React.createComponent is just a function. not component. but we've already achieved our goal by just three lines.
okay, next, let's look how to use:
export default function DesiredComponent(props) {
 const { component, children, color, ...others } = props
 const style = { color }
 return <DynamicComponent component={component || 'div'} {...others} style={style}>{children}</DynamicComponent>
}
it's simple, right?
P.S. for Typescript users:

The Dynamic Component in React?

댓글