I will briefly go over this tutorial, with an example <code>ErrorAlert</code> component.

<h2>
 <a name="the-problem" href="#the-problem">
 </a>
 The Problem
</h2>

When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component would become this: 


<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>&lt;ErrorAlert
 data={...}
 type={...}
 closeIcon={...}
 className={...}
 onInit={...}
 onClose={...}
/&gt;
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><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" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



You don't need me to tell you the disadvantages of this approach in the long run.


<hr>

<h2>
 <a name="the-solution" href="#the-solution">
 </a>
 The Solution
</h2>



<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>import { IonIcon } from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import React from "react";

interface IEssentials {
 className?: string;
}

const Body: React.FC&lt;IEssentials&gt; = ({ children, className, ...rest }) =&gt; {
 return (
 &lt;div className={"p-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" + " " + className} {...rest} role="alert"&gt;
 {children}
 &lt;/div&gt;
 );
};

const Text: React.FC&lt;IEssentials&gt; = ({ children, className, ...rest }) =&gt; {
 return (
 &lt;div className={"flex items-center gap-1" + " " + className} {...rest}&gt;
 &lt;IonIcon icon={alertCircleOutline} /&gt;
 &lt;div&gt;{children}&lt;/div&gt;
 &lt;/div&gt;
 );
};

export const ErrorAlert = { Body, Text };
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><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" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>



Usage 


<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code>import { ErrorAlert } from "./ErrorAlert.tsx"

const data = [...];

const App: React.FC = () =&gt; {
 return (
 &lt;div&gt;
 &lt;ErrorAlert.Body&gt;
 {data.map((dataItem) =&gt; (
 &lt;ErrorAlert.Text&gt;
 {dataItem}
 &lt;/ErrorAlert.Text&gt;
 ))}
 &lt;/ErrorAlert.Body&gt;
 &lt;/div&gt;
 )
}
</code></pre>
<div class="highlight__panel js-actions-panel">
<div class="highlight__panel-action js-fullscreen-code-action">
 <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><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" class="highlight-action crayons-icon highlight-action--fullscreen-off"><title>Exit fullscreen mode</title>
 <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</div>
</div>
</div>




<hr>

<h2>
 <a name="advantages-of-this-approach" href="#advantages-of-this-approach">
 </a>
 Advantages of this approach
</h2>

<ul>
<li>Open/Closed principle (SOLID): It should be open to extend but closed for modification.</li>
<li>Single Responsibility Principle (SOLID): Individual child components should have a single responsibility or perform a single function, this approach makes it easier to extend without having to modify the whole component.</li>
<li>Decoupling enables adding explicit functionalities based on requirements.</li>
<li>Easy refactoring.</li>
</ul>

I will briefly go over this tutorial, with an example `ErrorAlert` component.

## The Problem
When creating reusable components people will naturally feel passing what the component needs as props would be right, but over time that component would become this:
```js
<ErrorAlert
 data={...}
 type={...}
 closeIcon={...}
 className={...}
 onInit={...}
 onClose={...}
/>
``` 
You don't need me to tell you the disadvantages of this approach in the long run.

---
## The Solution
```js 
import { IonIcon } from "@ionic/react";
import { alertCircleOutline } from "ionicons/icons";
import React from "react";

interface IEssentials {
 className?: string;
}

const Body: React.FC<IEssentials> = ({ children, className, ...rest }) => {
 return (
 <div className={"p-4 text-sm text-red-700 bg-red-100 rounded-lg dark:bg-red-200 dark:text-red-800" + " " + className} {...rest} role="alert">
 {children}
 </div>
 );
};

const Text: React.FC<IEssentials> = ({ children, className, ...rest }) => {
 return (
 <div className={"flex items-center gap-1" + " " + className} {...rest}>
 <IonIcon icon={alertCircleOutline} />
 <div>{children}</div>
 </div>
 );
};

export const ErrorAlert = { Body, Text };
``` 
**Usage**
```js
import { ErrorAlert } from "./ErrorAlert.tsx"

const data = [...];

const App: React.FC = () => {
 return (
 <div>
 <ErrorAlert.Body>
 {data.map((dataItem) => (
 <ErrorAlert.Text>
 {dataItem}
 </ErrorAlert.Text>
 ))}
 </ErrorAlert.Body>
 </div>
 )
}
```

---
## Advantages of this approach
- Open/Closed principle (SOLID): It should be open to extend but closed for modification.
- Single Responsibility Principle (SOLID): Individual child components should have a single responsibility or perform a single function, this approach makes it easier to extend without having to modify the whole component.
- Decoupling enables adding explicit functionalities based on requirements.
- Easy refactoring.

I will briefly go over this tutorial, with an example ErrorAlert component.           The...