DEV Community

loading...
Cover image for Todo using React in html

Todo using React in html

chauchausoup profile image Krishna Dhakal ・2 min read

Here I will be showing a program to make a todo list app using React.
I havent used any npm builders for this project.

First we will go on with the source code of the app.

<!DOCTYPE html>
<html>
  <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <body>
    <div id="mydiv"></div>

    <script type="text/babel">
      class TodoApp extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            value: "",
            items: [],
          };

          this.afterSubmit = this.afterSubmit.bind(this);
          this.afterChange = this.afterChange.bind(this);
          this.removeTodo = this.removeTodo.bind(this);
        }
        afterChange(e) {
          this.setState({
            value: e.target.value,
          });
        }

        afterSubmit(e) {
          e.preventDefault();

          if (this.state.value.length === 0) return;

          const newItem = {
            value: this.state.value,
            id: Date.now(),
          };

          this.setState((state) => ({
            items: state.items.concat(newItem),
            value: "",
          }));
        }

        removeTodo(i) {
          let items = this.state.items.slice();
          items.splice(i, 1);
          this.setState({
            items,
          });
        }

        render() {
          return (
            <div>
              <h3>TODOS:</h3>
              <br />
              {this.state.value}

              <TodoList items={this.state.items} removeTodo={this.removeTodo} />
              <form onSubmit={this.afterSubmit}>
                <br />

                <label>
                  What is the plan?
                  <br />
                  <input
                    type="text"
                    value={this.state.value}
                    name="listItem"
                    placeholder="enter TODO item"
                    onChange={this.afterChange}
                  />
                  <br />
                </label>
                <br />

                <input type="submit" value="Submit" />
              </form>
            </div>
          );
        }
      }

      class TodoList extends React.Component {
        deletItem(i) {
          this.props.removeTodo(i);
        }

        render() {
          return (
            <ul>
              {this.props.items.map((item, i) => (
                <li key={item.id} value={item.value} className="listItem">
                  {item.value}
                  <whitespace />
                  <input
                    type="button"
                    value="X"
                    onClick={() => {
                      this.deletItem(i);
                    }}
                  />
                </li>
              ))}
            </ul>
          );
        }
      }

      ReactDOM.render(<TodoApp />, document.getElementById("mydiv"));
    </script>
  </body>
</html>


Enter fullscreen mode Exit fullscreen mode

The output of the above cove will be as shown below.

Alt Text

Discussion (0)

pic
Editor guide