title: how do I output the filtered todo list in React TypeScript
body: <p>It is console logging the right array out all the time, but the point here is that it should be outputting that in the 'TodoList.tsx'. Not sure how to get that fixed in this case. Anyone who could help me with this. To see the bigger picture, please click on this link:</p>
  
  <p><a href="https://codesandbox.io/s/github/chiholiu/todo-react-typescript" rel="nofollow noreferrer">Link to codesandbox todo</a></p>
  
  <p>I want the returned value from <strong>App.js</strong> currentFilter function pass it to <strong>TodoListItem.js</strong>, so it will update the map function constantly when user clicks on filter buttons. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// TodoFilter
  
  import React from 'react';
  
  interface TodoListFilter {
      currentFilter: CurrentFilter;
  }
  
  export const TodoFilter: React.FC&lt;TodoListFilter&gt; = ({ currentFilter }) =&gt; {
      return (
          &lt;ul&gt;
              Filter
              &lt;li onClick={() =&gt; currentFilter('All')}&gt;All&lt;/li&gt;
              &lt;li onClick={() =&gt; currentFilter('Complete')}&gt;Completed&lt;/li&gt;
              &lt;li onClick={() =&gt; currentFilter('Incomplete')}&gt;Incompleted&lt;/li&gt;
          &lt;/ul&gt;
      )
  }
  
  // App.js
  
    const currentFilter: CurrentFilter = filterTodo =&gt; {
      let activeFilter = filterTodo;
      switch (activeFilter) {
        case 'All':
          return todos;
        case 'Complete':
          return todos.filter(t =&gt; t.complete);
        case 'Incomplete':
          return todos.filter(t =&gt; !t.complete);
         default:
          console.log('Default');
      }
    }
    
      return (
      &lt;React.Fragment&gt;
        &lt;TodoList 
          todos={todos} 
          toggleTodo={toggleTodo} 
          deleteTodo={deleteTodo} 
          editTodo={editTodo} 
          saveEditedTodo={saveEditedTodo} 
          getEditText={getEditText}
        /&gt;
        &lt;TodoFilter currentFilter={currentFilter}/&gt;
        &lt;AddTodoForm addTodo={addTodo}/&gt;
      &lt;/React.Fragment&gt;
    )
    
  // TodoListItem
  
    import React from 'react';
  import { TodoListItem } from "./TodoListItems"; 
  
  interface TodoListProps {
      todos: Array&lt;Todo&gt;;
      toggleTodo: ToggleTodo;
      deleteTodo: DeleteTodo;
      editTodo: EditTodo;
      getEditText: GetEditText;
      saveEditedTodo: SaveEditedTodo;
      currentFilter: CurrentFilter;
  }
  
  export const TodoList: React.FC&lt;TodoListProps&gt; = ({ todos, toggleTodo, deleteTodo, editTodo, getEditText, saveEditedTodo, currentFilter }) =&gt; {
      return (
          &lt;ul&gt;
              {todos.map((todo, i) =&gt; {
                  return &lt;TodoListItem key={i} 
                              todo={todo} 
                              toggleTodo={toggleTodo} 
                              deleteTodo={deleteTodo} 
                              editTodo={editTodo} 
                              saveEditedTodo={saveEditedTodo} 
                              getEditText={getEditText}
                          /&gt;
              })}
          &lt;/ul&gt;
      )
  }
  
  //Folder structure
  src
  -App.tsx
  -AddTodoForm.tsx
  -TodoFilter.tsx
  -TodoList.tsx</code></pre>
  </div>
  </div>
  </p>