Props Down, Events Up

by Jason Miller

HTML

<script src="https://npmcdn.com/preact"></script>
<script src="https://npmcdn.com/decko"></script>

Babel + JSX

const { h, Component, render } = preact;
const { bind } = decko;
/** @jsx h */

class Parent extends Component {
  // parent owns its state:
  state = {
    value: 'Hello, World!'
  };
  render({ }, { value }) {
    return (
      <div>
        <Child
          text={value}
          onInput={this.linkState('value', 'text')}
        />
        <pre>value = { value }</pre>
      </div>
    );
  }
}

class Child extends Component {
  @bind
  handleInput(e) {
    let text = e.target.value;
    this.props.onInput({ text });
  }
  render({ text }) {
    return <input value={text} onInput={this.handleInput} />;
  }
}

render(<Parent />, document.body);