local state for a select box

There was a lot of discussion regarding sub-components in #2 and #73 already.

I was wondering how should one go about creating a reusable select box. There is a lot of state involved that does not necessary need to be stored in the root model:

• filteredSuggestions - Filtered suggestion displayed in the dropdown menu
• open - Is the dropdown menu open?
• value - Current value of the select input box

In React, I created two components StatefulSelect and Select, the first maintaining it’s local state and the latter a stateless functional component representing it’s visual appearance.

const Select = () => { /* ... */ }

class StatefulSelect extends Component {
  constructor (props) {
    super(props)

    this.state = {
      value: '',
      open: false,
      filteredSuggestions: props.suggestions,
      selected: null
    }
  }

  // ... state update methods ...

  render () {
    return <Select open={this.state.open} />
  }
}

So in hyperapp there is no concept of local state, right? I need to attach the <Select /> state directly to the root model. Wouldn’t that be a use case for nested app()'s? And if not, I would love to see an implementation of a select box in hyperapp

[zaceno]

@jbucaran 😆 indeed it is. Not saying anyone should do this. Just that you could 😉

[jorgebucaran]

@zaceno This is dark magic!