Mapping array to make list

So I was trying to make a list based off the input from a textbox, but my text input no longer shows up, and I get a object error in code pen. Here is what I have. Anything you see wrong would be helpful. Just went through the react part the other day, so im pretty new to it

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newTodo: '',
      todo: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      newToDo: event.target.value
    });
  }
  handleSubmit(event) {
    
    event.preventDefault();
const newArr = [this.state.todo, this.state.newToDo]
this.setState({newArr, newToDo: ''});
  }
  render() {
    const items = newArr.map((items) => <li>{items}</li>)
    return (
      <div>
<form onSubmit={this.handleSubmit}>
          
    <input
    value = {input}
    onChange = {this.handleChange}
    />
    <button type='submit'>Submit!</button>
 </form>
       
  <ol>{items}</ol>

       
      </div>
    );
  }
};

ReactDOM.render(<MyForm />, document.getElementById('app'));

I saw that a few minutes ago actually. Trying to many different things that I was not careful to change or get rid of everything. Here is what I have now

class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      newTodo: '',
      todo: []
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleChange(event) {
    this.setState({
      newTodo: event.target.value
    });
  }
  handleSubmit(event) {
    
    event.preventDefault();
const newArr = [...this.state.todo, this.state.newToDo];
this.setState({newArr, newToDo: ''});
  }
  render() {
    const items = this.state.todo.map((items) => <li>{items}</li>)
    return (
      <div>
<form onSubmit={this.handleSubmit}>
          
    <input
    value = {this.state.newTodo}
    onChange = {this.handleChange}
    />
    <button type='submit'>Submit!</button>
 </form>
       
  <ol>{items}</ol>

       
      </div>
    );
  }
};

ReactDOM.render(<MyForm />, document.getElementById('app'));

Some of this code was from a udemy lesson, but he initializes several ‘todos’, so its hard to see which one he is talking about.

in the udemy code he adds the empty array of todos and the newtodo to the new array.

 const todos = [...this.state.todos, this.state.newTodo];
 this.setState({todos, newTodo: ''});

I dont see why he adds the empty array here? Or what newArr is being set to in the setState?
The new newtodo there just clears the input field.

Here is the code I am talking about, and trying to follow along/understand

I will work on that. The one thing I’m still confused it. The original array is empty. There are no to dos in it. So what’s the point on adding the todo array to the newArr? In the GitHub code I posted, and tried to follow I don’t see where todo gets any values.

Makes more sense. Never knew

this.setState({ todo, newToDo: "" });

meant todo:todo. Thats where a lot of confusion came from, it was not explained in his video or before that video.