title: How to display a list of functional components
body: <p>I am creating a basic Todo app with ReactJS and I want to display the list of todos. I made a <code>todo</code> into a functional component and I create a <code>TodoList</code> component that should display the list. The problem is that when the <code>add</code> button is clicked, the todo is not added to the list and so the list is always empty.</p>
  
  <p>Here's my <code>App.js</code>:</p>
  
  <pre><code>import React, {Component} from "react";
  import "./App.css";
  import axios from "axios";
  
  const TodoForm = ({addTodo}) =&gt; {
    // Input tracker
    let input;
  
    return (
      &lt;div&gt;
        &lt;input
      ref={node =&gt; {
        input = node;
      }}
        /&gt;
        &lt;button
      onClick={() =&gt; {
        addTodo(input.value);
        input.value = "";
      }}
        &gt;
      +
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  const Todo = ({todo, remove}) =&gt; {
    // Each todo
    return &lt;li onClick={remove(todo.id)}&gt;{todo.text}&lt;/li&gt;;
  };
  
  const TodoList = ({todos, remove}) =&gt; {
    // Map through the todos
    const todoNode = todos.map(todo =&gt; {
      return &lt;Todo todo={todo} key={todo.id} remove={remove}/&gt;;
    });
    return (
      &lt;div className="list-group" style={{marginTop: "30px"}}&gt;
        {todoNode}
      &lt;/div&gt;
    );
  };
  
  const Title = () =&gt; {
    return (
      &lt;div&gt;
        &lt;h1&gt;Todo App&lt;/h1&gt;
      &lt;/div&gt;
    );
  };
  
  // Container component
  window.id = 0;
  
  class App extends Component {
    constructor(props) {
      // Pass props to parent class
      super(props);
      // Set initial state
      this.state = {
        data: []
      };
      this.apiUrl = ""; // my url goes here
      // Make HTTP requests with axios
      axios.get(this.apiUrl).then(res =&gt; {
        // Set state with result
        this.setState({data: res.data});
      });
    }
  
    // addTodo hanlder
    addTodo(val) {
      // Assemble data
      const todo = {text: val, id: window.id++};
      // Update data
      this.state.data.push(todo);
      axios.post(this.apiUrl, todo).then(res =&gt; {
        this.state.data.push(res.data);
        this.setState({data: this.state.data});
      });
    }
  
    render() {
      return (
        &lt;div&gt;
      &lt;Title/&gt;
      &lt;TodoForm addTodo={this.addTodo.bind(this)}/&gt;
      &lt;TodoList
        todos={this.state.data}
        remove={this.handleRemove.bind(this)}
      /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>Here's a screenshot of my app. The list should be displayed below the input text.</p>
  
  <p><a href="https://i.stack.imgur.com/ZQrcd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZQrcd.png" alt="my app right now"></a></p>
  
  <p>I get 1 warning only, and no errors:</p>
  
  <pre><code>Line 86:  Expected to return a value at the end of arrow function  array-callback-return
  </code></pre>
  
  <p>I think it is somewhere in my <code>addTodo</code> function, but I am not sure at all. Can anyone help? Thanks.</p>