vaadin-select in a React / Preact App

Hey everyone, I’ve been using some vaadin components to build out a proof-of-concept app.
It started out as a React app, but we’re going to use Web Components going forward so I’ve switched over to Preact which works better with Event handling.

I have a vaadin-select element built out and I’m using its renderer method to populate the options, but I’d like to just use JSX, which is not working. Can anyone give me a hint as to why? The Select element appears but will not populate

<vaadin-select
  label="State"
  name="state"
  onvalue-changed={ onChange } // Preact makes this possible
  value={ user.address.state }>

  <template>
    <vaadin-list-box>
      { states.map( state => (
        <vaadin-item
          active={ state.abbreviation === user.address.state }
          value={ state.abbreviation }>                    
          { state.abbreviation }
        </vaadin-item> 
      ))}
    </vaadin-list-box>
  </template>

</vaadin-select>

Currently this is working (using the renderer):

const dropdown = fields.state.element.current

dropdown.renderer = dropdownElement => {
  const listBox = window.document.createElement( 'vaadin-list-box' )

  states.forEach( state => {
    const item = window.document.createElement( 'vaadin-item' )

    item.textContent = `${ state.full_name } (${ state.abbreviation })`

    item.setAttribute( 'value', state.abbreviation )
    item.setAttribute( 'label', state.abbreviation )
    item.setAttribute( 'active', state.abbreviation === user.address.state )

    listBox.appendChild( item )
  })

  dropdownElement.appendChild( listBox )
}

Thanks!

I have a feeling that they can’t be used that way now, due to some DOM manipulation things, and that the renderer way is the way to go. Sorry. We used to have <template> nodes in Light DOM that enabled doing code that you were looking for, but that caused a bunch of other issues, especially in integrations with React, Vue, and the like.

I’m not 100% sure that there isn’t a way to do what you like as React + Web Components (and especially Vaadin web components) is not thoroughly explored yet. Please share back if you learn something new.

Also have a look at something that my colleague built - a bunch of React-y wrappers to Vaadin web components. The API there for select is quite close to what you are looking for. https://tomivirkki.github.io/react-vaadin-components/#/components/select https://github.com/tomivirkki/react-vaadin-components.

Thanks Jens, I did come across that library at one point but I’d prefer to do things without having to create wrappers in React if possible.

The app I’m working on is only using Vaadin temporarily to get the architecture of the app built out. The plan is to have our team build out our own Web Components library as we move forward. Odds are we will build some kind of select component ourselves and come up with a way of populating the options (passing them in as data or something like that).

Thanks!

Sounds cool! Please share back if you find a good way, shen you get to the point of writing own components. I would love to learn how to incorporate that feature, and it might be added to the Vaadin components as well. Personally I’m really into using web components in React.