# Custom Components

{% hint style="info" %}
So far I have mentioned the imports. to reduce code size, I'm going to summarize all the imports here:

```javascript
import { ComponentName } from '@weblabsjs/core/components'
import { 
  WeblabsElement, State, $, When, onLoad, 
  render, Url, AppRouter, AppNavigator, AppLink 
} from '@weblabsjs/core'
```

{% endhint %}

So far, we learned how to create simple components, how to nest them and how to add properties and events to them. In this page, we will learn how to create our very own custom components using other components.

## Components from Variables

Weblabs components can be normal variables, that will store some combination of other components, which can also have custom nested components.

Let's say I have some component that shows some name of user and their age

```javascript
var name = div(
    p("Name: Mayukh"),
    p("Age: 17")
)
```

Here I created this variable, now I can use this variable directly into other components as their children or in the render function

```javascript
render("app", name) //import { render } from '@weblabsjs/core'
```

Now, you can also use variables inside the declaration of your custom components, like this:

```javascript
let name = "Maykh"
let age = 17
var component = div(
    p(`Name: ${name}`),
    p(`Age: ${age}`)
)

render("app", component)
```

This means you can have nested functions and variables and it will work just as well.

{% hint style="info" %}
Note: If a component is using some arbitrary variable, and that variable was updated, then the state of the UI will not change, i.e the changes will not be shown to the UI. For this, we will need to use states that we will learn in Reactivity
{% endhint %}

## Components from function

A function that will return a Weblabs component in a component function. Your function can do anything inside it's body, or call any function, but it **MUST** return a WeblabsElement, and it must not be an async function, since async function returns Promise object.

There is no hard rule for creating a functional component in Weblabs, so you can use any way that suites you, but make sure your function returns a Weblabs component, or another functional component.

```javascript
function MyComponent() {
    return p("Hello from function MyComponent!")
}

render("app", MyComponent())
```

### Receiving custom props in functional component

Your functional component can accept any type of props, and they can be of any type, and it's upto you how you manage them and return a valid bolt component. Let's see a simple example:

```javascript
function ShowUserDetails(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

render("app", ShowUserDetails("Mayukh", 17))
```

## Higher Order Components

All the custom components that you make are 100% compatible with any higher order components that are provided by Weblabs.

That means you can assign ids, events, classes and other things to a custom components, be it variable component or functional component, and it will have the exact same effect.

Let's see some examples:

```javascript
var name = div(
    p("Name: Mayukh"),
    p("Age: 17")
)

//the id of the name component is now hello
name = name.id("hello")
render("app", name)
```

And for functional component:

```javascript
function MyComponent(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

render("app", MyComponent("Mayukh", 17).id("hello")) //same effect
```

## Nesting components

Now that we saw how to create custom components, with approaches like functional components and variable components, we can now get to create nested components.

```javascript
function ShowUserDetails(name, age) {
    return div(
        p(`Name: ${name}`),
        p(`Age: ${age}`)
    )
}

var dashboard = div(
    p("Welcome to dashboard!"),
    p("User Details: "),
    ShowUserDetails("Mayukh", 17)
)

render("app", dashboard)
```

We can do it other way around as well. This opens up several option for developers to create interesting patterns in their applications, unique to themselves since Weblabs does not binds any strict rule except as mentioned above.