input type date value is not updated when data changed

[ddd]

Hi @WebReflection,

Please look at this

import {render, html} from '//cdn.skypack.dev/uhtml/json';

let myDate = "2021-12-21";
const greetings = who => html.json`
  <h1>Hello ${who} 👋</h1>
  <input type=date .value=${myDate} />
  <button onclick=${e => {myDate = new Date().toISOString().substr(0,10); console.log(myDate)}}>Update</button>
  <p>Posted @ ${new Date().toISOString()}</p>
`;

render(document.body, greetings("uhtml"));

[Marcelo Volmaro]

But you are not calling render again from your event handler... of course it will not update. Reactivity is achieved by other libraries, not uhtml.

[ddd]

Thanks @CheloXL, I will check my code.
Edit: You're correct. I used it wrong :)

import {render, html} from '//cdn.skypack.dev/uhtml/json';

addEventListener('message', ({
  data: {action, where, content}
}) => {
  if (action === 'render')
    render(document.querySelector(where), content);
});

let myDate = "2021-12-21";
const greetings = who => html.json`
  <h1>Hello ${who} 👋</h1>
  <input type=date .value=${myDate} />
  <p>Posted @ ${new Date().toISOString()}</p>
`;

setInterval(
  () => {
    myDate = new Date().toISOString().substr(0,10);
    postMessage({
      action: 'render',
      where: 'body',
      content: greetings('There')
    });
  },
  5000
);