How to render objects in hyperHTML

Question

I've been asked to create a dropdown menu using hyperHTML for an exercise. I'm new to this framework and admittedly haven't found a great deal of material on hyperHTML online, but I've drafted a basic template based on what I've read. The problem is when I attempt to run my script using JSFiddle, it returns nothing from the entire div contents. Is anybody able to explain why this might be?

// HTML

<div id="drop"></div>

// JS

const modes = [{label: 'Driving', value: 'driving'},{label: 'Walking', value: 'walking'},{label: 'Cycling', value: 'cycling'}];

const render = hyperHTML.bind(document.getElementById('drop'));

render`
  <h1>Hello, world</h1>
  <select>
    ${modes.map(obj => wire(obj)`<option value="${obj.value}">${obj.label}</option>`)};
  </select>
`;

Note: It is only when I add the code within the select parameters that JSFiddle refuses to render the div contents.

Answer 1

From what I can see from your code, you should have an error about the undefined wire, as you don't reference it anywhere.

This is the code I've used in this code pen, and everything works just fine.

const modes = [
  {label: 'Driving', value: 'driving'},
  {label: 'Walking', value: 'walking'},
  {label: 'Cycling', value: 'cycling'}
];

const {bind, wire} = hyperHTML;
const render = bind(document.getElementById('drop'));

render`
  <h1>Hello, world</h1>
  <select>
    ${modes.map(obj => wire(obj)`<option value=${obj.value}>${obj.label}</option>`)};
  </select>
`;