Предупреждения React JS: Failed propType и неконтролируемый ввод

Я пытаюсь исправить некоторые проблемы, связанные с Реагировать JS. В настоящее время работаю над ускоренным курсом и пытаюсь улучшить todoList. Я очень новичок, и, надеюсь, это может дать мне новую перспективу после 8 часов устранения неполадок.

Мой код - Ввод:

export class TodoItem extends Component {
getStyle = () => {
    return {
        background: '#233D4D',
        padding: '15px',
        borderBottom: '1px darkgray Ridge',
        textDecoration: this.props.todo.completed ? 'line-through' : 
 'none',
        color: this.props.todo.completed ? 'lightgreen' : 'white',
        fontWeight: this.props.todo.completed ? 'bold' : 'none',
    }
}

render() {
    const { title } = this.props.todo;
    return (
        <div style = {this.getStyle()}>
            <p>
                <input type = "checkbox" onChange= . 
    {this.props.markComplete.bind(this)} checked= . 
    {this.props.todo.completed} /> {'  '}
                {title}
                <button style = {btnStyle} onClick= . 
    {this.props.delTodo.bind(this)}><FontAwesomeIcon size = "2x" icon= . 
    {faTrash} /></button>
            </p>
        </div>
      )
     }
    }

   // PropTypes
   TodoItem.propTypes = {
   Todos: PropTypes.array.isRequired,
   markComplete: PropTypes.func.isRequired,
   delTodo: PropTypes.func.isRequired
   }

Мой код - Ошибка propType:

render() {
    const { title } = this.props.todo;
    return (
        <div style = {this.getStyle()}>
            <p>
                <input type = "checkbox" 
                onChange = {this.props.markComplete.bind(this)} 
                checked = {this.props.todo.completed} /> {'  '}
                {title}
                <button style = {btnStyle} 
                onClick = {this.props.delTodo.bind(this)}>
                <FontAwesomeIcon size = "2x" icon = {faTrash} />
                </button>
            </p>
        </div>
    )
}

// PropTypes
TodoItem.propTypes = {
    Todos: PropTypes.array.isRequired,
    markComplete: PropTypes.func.isRequired,
    delTodo: PropTypes.func.isRequired
}

Вот мои проблемы:

#1 - Prop Types

index.js:1446 Warning: Failed prop type: The prop `Todos` is marked as required in `TodoItem`, but its value is `undefined`.
in TodoItem (at Todos.js:12)

#2 - Component changing an uncontrolled input

Warning: A component is changing an uncontrolled input of type text to 
be controlled. Input elements should not switch from uncontrolled to 
controlled (or vice versa). Decide between using a controlled or 
uncontrolled input element for the lifetime of the component.`

======== РЕДАКТИРОВАТЬ =========

Здесь вызываются компоненты, передаются свойства и выполняются манипуляции:

render() {
    return (
      <Router>
        <div className = "App">
          <div className = "container">
            <Header />
            <Route exact path = "/" render = {props => (
              <React.Fragment>
                <AddTodo addTodo = {this.addTodo} />
                <Todos todos = {this.state.todo} markComplete= . 
                  {this.markComplete}
                  delTodo = {this.delTodo} />
              </React.Fragment>
            )} />
            <Route path = "/about" component = {About} />
          </div>
        </div>
      </Router>
    );

class Todos extends Component {
  render() {
    // Mangler håndtering af ingen elementer
    let output = undefined;
    if (this.props.todos && this.props.todos.length > 0){
      // lav object
      let output = this.props.todos.map((todo) => (
        <TodoItem key = {todo.id} todo = {todo} markComplete= 
   {this.props.markComplete} delTodo = {this.props.delTodo} />
      ))
      return output;
       }
       return (
        <div>
          {output}
        </div>
        /*this.props.todos.map((todo) => (
          <TodoItem key = {todo.id} todo = {todo} markComplete= 
  {this.props.markComplete} delTodo = {this.props.delTodo} />
        ))*/
      );
    }
  }