Form Controls for JSX

[thescientist13]

Type of Change

• New Feature Request

Summary

Would like to support these kinds of features

1. [ ] Boolean Attributes
2. [ ] Form Submission

Details

Boolean Attributes

Like a checked attribute

render() {
  const { completed, task } = this.todo;
  const checked = completed ? 'checked' : '';

  return (
    <input class="complete-todo" type="checkbox" checked/>
  );
}

To my knowledge, JSX does not support this syntax

<input type="checkbox" {isChecked} />

Form Submission

Would like be able to do something like this

class Todo extends HTMLElement {
  addTodo(e) {
    e.preventDefault();
    ...

    this.render();
  }

  render() {
    return 
      <form onsubmit={this.addTodo}>
        <input class="todo-input" type="text" placeholder="Food Shopping" required/>
        <button class="add-todo" type="button" onclick={this.addTodo}>+ Add</button>
      </form>
    );
  }
}

Right now it works, but by accident I think, and seeing this error in the console