import { h, Component } from 'preact'
import { bind } from './util'

export default class extends Component {
  constructor() {
    super()
    this.state.show = false
  }
  linkState(key) {
    return e => this.setState({
      [key]: e.target.value
    })
  }
  @bind
  toggleShow() {
    this.setState({
      show: !this.state.show
    })
  }
  clearState() {
    this.setState({
      appName: '',
      username: '',
      password: '',
      show: false
    })
  }
  @bind
  handleSubmit(e) {
    e.preventDefault()

    this.props.add(this.state.appName, this.state.username, this.state.password)
    this.clearState()
  }
  render(_, { show, appName, username, password }) {
    return (
      <section>
        <div style={{display: show ? 'block' : 'none'}}>
          <form onSubmit={this.handleSubmit}>
            <input name='appName' placeholder='Enter app name' value={appName} onInput={this.linkState('appName')} />
            <input name='username' placeholder='Enter app username' value={username} onInput={this.linkState('username')} />
            <input name='password' placeholder='Enter app password' value={password} onInput={this.linkState('password')} />
            <button type='submit'>Save</button>
          </form>
        </div>
        <button onClick={this.toggleShow}>Add new app</button>
      </section>
    )
  }
}

@@ -489,24 +489,80 @@
 Submit(e) %7B%0A
+    const %7B appName, username, password %7D = this.state%0A%0A
     e.preven
@@ -572,17 +572,16 @@
 fault()%0A
-%0A
     this
@@ -595,60 +595,27 @@
 add(
-this.state.appName, this.state.username, this.state.
+appName, username, 
 pass

Use destructuring to remove noise