habitica-sync/view/Components/Taskview/index.tsx

import * as React from "react";
import TodoItem from "./TodoItem"
import { Tab, Tabs, TabList, TabPanel } from "react-tabs";

export default function Index(props: any){
    const incompleteTodos = props.todos.map((todo: any) => {
            if(!todo.completed)
                return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
    })
    const completedTodos = props.todos.map((todo: any) => {
        if(todo.completed)
            return <TodoItem key={todo.id} id={todo.id} todo_text={todo.text} onChange={props.onChange} completed={todo.completed}/>
    })
    const display = <div id="classDisplay">
                        <Tabs>
                        <TabList>
                            <Tab>Active Todos</Tab>
                            <Tab>Completed Todos</Tab>
                        </TabList>
                        <TabPanel>
                            <ul>{incompleteTodos}</ul>
                        </TabPanel>
                        <TabPanel>
                            <ul>{completedTodos}</ul>
                        </TabPanel>
                        </Tabs>
                    </div>

    return(display);
}