> For the complete documentation index, see [llms.txt](https://combo-js.gitbook.io/project/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://combo-js.gitbook.io/project/faqs/props.md).

# Props

### Where do I define default component props?

Inside the created() life cycle hook.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { Component } from "combo-js";

const Example = new class extends Component {
    created() {
        this.props = {
            name: "world"
        }
    }
    render() {
        return `
            <div>Hello ${this.props.name}</div>
        `;
    }
}();

Example.mount(document.getElementById("root"));
```

{% endtab %}

{% tab title="HTML" %}

```markup
<div id="root"></div>
```

{% endtab %}
{% endtabs %}

### How do I pass props to a mounted component?

Pass them through the mount() method.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { Component } from "combo-js";

const Example = new class extends Component {
    created() {
        this.props = {
            name: ""
        }
    }
    render() {
        return `
            <div>Hello ${this.props.name}</div>
        `;
    }
}();

Example.mount(document.getElementById("root"), {
    name: "Combo"
});
```

{% endtab %}

{% tab title="HTML" %}

```markup
<div id="root"></div>
```

{% endtab %}
{% endtabs %}

### How do I pass props to an unmounted component?

Pass them through the constructor function.

{% tabs %}
{% tab title="JavaScript" %}

```javascript
import { Component } from "combo-js";

const Foo = new class extends Component {
    created() {
        this.props = {
            name: ""
        }
    }
    render() {
        return `
            ${Bar.render(this.props)}
        `;
    }
}();

const Bar = (props) => {
    return {
        <div>Hello ${props.name}</div>
    }
};

Example.mount(document.getElementById("root"), {
    name: "Combo"
});
```

### Can I manipulate props?

You can manipulate props in the receiving() life cycle method.

{% endtab %}

{% tab title="HTML" %}

```markup
<div id="root"></div>
```

{% endtab %}
{% endtabs %}