Component Structure

Sandstone components have the exact same structure as React componnents (with Preact's additions) plus some additional methods.

WebComponent methods

setStateAsync

This method does exactly what setState does but returns a promise. You can also pass a promise into it and it will wait for it to resolve and set the state to the result of that promise. For example:

getData = async () => {
    const raw = await fetch('/api/user/profile');
    await this.setStateAsync(raw.json());
    this.doTheThing();
}

Is equal to:

getData = async () => {
    const raw = await fetch('/api/user/profile');
    const newState = = await fetch.json();
    this.setState(newState, () => this.doTheThing());
}

linkState

Used to automatically link your inputs to state.

class MyForm extends WebComponent {
    render() {
        return (
            <div>
                <span className="preview">{this.state.inputValue}</span>
                <input onChange={this.linkState('inputValue')} />
            </div>
        )
    }
}

on and trigger

These methods are explained in the Events section.

Next: Lifecycle Methods →

results matching ""

    No results matching ""