title: What am I missing in this React to-do app that I'm making?
body: <p>Yes, I'm new to React, and I'm trying to make the (infamous?) to-do app from scratch. So far I just have a todo component and then the main app. Here's my code - first is the Todo component:</p>
  
  <pre><code>import PropTypes from 'prop-types';
  
  class Todo extends Component {
  
      static defaultProps = {
          completed: false,
      }
  
      static propTypes = {
          completed: PropTypes.bool.isRequired,
          // name: PropTypes.string.isRequired,
      }
  
      constructor(props){
          super(props)
  
          this.state = {
              completed: false,
          }
      }
  
      render(){
          return (
              &lt;div&gt;
                  {!this.state.completed &amp;&amp; &lt;div&gt;
                      &lt;span&gt;{this.props.name}&lt;/span&gt;
                      &lt;input type="checkbox" onClick={() =&gt; {this.markCompleted()}}/&gt;
                  &lt;/div&gt;}
              &lt;/div&gt;
          )
      }
  
      markCompleted = () =&gt; {
          this.setState((currentState) =&gt; {
              return {
                  completed: !currentState.completed
              }
          })
      }
  }
  
  export default Todo;
  </code></pre>
  
  <p>And then the main App component...</p>
  
  <pre><code>import React from 'react';
  import Todo from './Todo';
  import './App.css';
  
  class App extends React.Component {
  
    constructor(props){
      super(props)
        this.state = {
          todos: [{id: 1, name: 'take out trash'}, {id: 2, name: 'feed the cat'}]
        }
    }
  
    render(){
      let textInput;
      const todos = this.state.todos.map(todo =&gt; &lt;Todo key={todo.id} name={todo.name} completed={todo.completed}/&gt;)
      return (
        &lt;div className="App"&gt;
           &lt;input type="text" ref={(el) =&gt; {textInput = el}} /&gt;
           &lt;button onClick={() =&gt; {this.addTodo(textInput.value)}}&gt;Click to Add a Todo&lt;/button&gt;
          {todos}
        &lt;/div&gt;
      );
    }
  
    addTodo = (todoName) =&gt; {
      const newTodo = {id: this.state.todos.length + 1, name: todoName};
      const todos = this.state.todos.map(todo =&gt; &lt;Todo key={todo.id} name={todo.name} completed={todo.completed}/&gt;)
      todos.push(newTodo)
      console.log(this.state.todos);
        this.setState({
          todos
        })
        // console.log(todos)
      }
  }
  
  export default App;
  </code></pre>
  
  <p>So I'm left with a conundrum. On the initial render, the state of the todos array maps out just fine. However, when I type in a todo and click the button to add the todo, all of the names of the other todos vanish, and only the name of the last pushed todo appears. So if I were to add a todo "pay bills," then the checkboxes for "take out the trash" and "feed the cat" will still be visible, but the names of those todos will no longer be visible. I can click the checkboxes just fine to remove the todos as well, but I wish my todos array would cooperate. I think I'm also supposed to use <code>.filter</code> to properly filter out todos whose completed state is marked as <code>true</code>. Are the other names disappearing because of the <code>todoName</code> parameter I've added in the <code>addTodo</code> method? Is that causing all previous todo names to be undefined? I am really trying to learn, and I'm open to all help and suggestions to improve. I would request that we work with the code that I have already, as I've seen how other people have made the todo app before, and I don't want to just copy and observe someone else's code, because I feel that that detracts from my learning. Thanks in advance for any help! </p>