30 lines
No EOL
1.2 KiB
TypeScript
30 lines
No EOL
1.2 KiB
TypeScript
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);
|
|
} |