A simple form to show lessons learned about JS when building a simple controlled form in react without using class properties

controlled-todo-add-form-no-class-variables.js

import React, { Component, Fragment } from "react";

class TodoForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todoName: ""
    };

    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    const { name, value } = event.target;
    this.setState({ [name]: value });
  }

  handleAddToDo(event) {
    event.preventDefault();
    // do add todo logic here
  }

  render() {
    return (
      <form onSubmit={this.handleAddToDo}>
        <label htmlFor="todoName">Todo Name: </label>
        <input
          type="text"
          name="todoName"
          id="todoName"
          placeholder="Name Your TODO"
          onChange={this.handleInputChange}
        />{" "}
        <input type="submit" value="Add" />
      </form>
    );
  }
}