React app not showing in Codepen no matter what?

Question

I have a react app that I made in VS Studio, putting it into codepen, it doesnt seem to load a thing, any suggestions?

I have tried making sure React is linked and checked all of my syntax, no errors on local host but no display in codepen.

I have looked through the code multiple times and I feel its such a silly mistake

https://codepen.io/donnieberry97/pen/EzmOvW

    class TodoListt extends React.Component {
      state = {};

      constructor(props) {
        super(props);

        this.state = {
          userInput: "",
          list: [],
          editing: false,
        };
      }

      changeUserInput(input) {
        this.setState({
          userInput: input
        })
      }


      addToList() {
        if (this.state.userInput === "") { (alert("Please enter a To-do")); return; };
        const { list, userInput } = this.state;
        this.setState({
          list: [...list, {
            text: userInput, key: Date.now(), done: false
          }],
          userInput: ''
        })
      }

      handleChecked(e, index) {
        console.log(e.target.checked);
        const list = [...this.state.list];
        list[index] = { ...list[index] };
        list[index].done = e.target.checked;
        this.setState({
          list
        })
      }

      handleEditing(e) {
        this.setState({
          editing: true
        })
      }

      handleRemoved(index) {
        const list = [...this.state.list];
        list.splice(index, 1);

        this.setState({
          list
        })
      }

      render() {

        var viewStyle = {};
        var editStyle = {};

        if (this.state.editing) {
          viewStyle.display = "none"
        }
        else {
          editStyle.display = "none"
        }


        return (
          <div className="to-do-list-main">
            <input
              onChange={(e) => this.changeUserInput(e.target.value)}
              value={this.state.userInput}
              type="text"
            />
            <div class="submitButton">
              <button onClick={() => { this.addToList(this.state.userInput) }}>Add todo</button>
            </div>

            {this.state.list.map((list, index) => (
              <div className="form">
                <ul>
                  {/* <div style={viewStyle} onDoubleClick={this.handleEditing.bind(t his)}> */}

                  <li key={list.key}>
                    <div class="liFlexCheck">
                      <input type="checkbox" onChange={(e) => this.handleChecked(e, index)} />
                    </div>
                    <div class="liFlexText">
                      <div class="liFlexTextContainer">
                        <span style={{ textDecoration: list.done ? 'line-through' : 'inherit' }}>
                          {list.text}
                        </span>
                      </div>
                    </div>
                    <button onClick={(index) => this.handleRemoved(index)}>Remove</button>
                    <input
                      type="text"
                      style={editStyle}
                      value={list.text}
                    />
                  </li>
                  {/* </div> */}
                </ul>
              </div>
            ))}


          </div>
        );
      }
    }

Answer 1

Remove the import statements, working example.

You shouldn't use import when you got External Scripts.

Also, you got many errors in your code that should be handled, like:

• <div class="submitButton">, use className.
• Each child in a list should have a unique key prop.
• Form field with value prop but without onChange handler.

Check out the logs: