Props

Where do I define default component props?

Inside the created() life cycle hook.

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"));

HTML

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

How do I pass props to a mounted component?

Pass them through the mount() method.

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"
});

HTML

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

How do I pass props to an unmounted component?

Pass them through the constructor function.

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.

HTML

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