microsoft/frontend-bootcamp
1
0
Fork 0
mirror of https://github.com/microsoft/frontend-bootcamp.git synced 2026-01-26 14:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

adding types to 7

Browse Source
This commit is contained in:
Micah Godbolt
2019-02-14 15:02:36 -08:00
parent 9441bc5f37
commit c1cac333d8
6 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
step1-07/src/components/TodoHeader.tsx
View File

@@ -1,13 +1,20 @@
import React from 'react';
import { FilterTypes } from '../TodoApp.types';
export class TodoHeader extends React.Component<any, any> {
interface TodoHeaderProps {
addTodo: (label: string) => void;
setFilter: (filter: FilterTypes) => void;
filter: FilterTypes;
}
export class TodoHeader extends React.Component<TodoHeaderProps, any> {
constructor(props) {
super(props);
this.state = { labelInput: '' };
}
render() {
const { filter } = this.props;
const { filter, setFilter } = this.props;
return (
<div>
<h1>todos</h1>
@@ -16,13 +23,13 @@ export class TodoHeader extends React.Component<any, any> {
Add
</button>
<div className="filter">
<button onClick={() => this._onFilter('all')} className={filter == 'all' ? 'active' : ''}>
<button onClick={() => setFilter('all')} className={filter == 'all' ? 'active' : ''}>
all
</button>
<button onClick={() => this._onFilter('active')} className={filter == 'active' ? 'active' : ''}>
<button onClick={() => setFilter('active')} className={filter == 'active' ? 'active' : ''}>
active
</button>
<button onClick={() => this._onFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
<button onClick={() => setFilter('completed')} className={filter == 'completed' ? 'active' : ''}>
completed
</button>
</div>
@@ -30,10 +37,6 @@ export class TodoHeader extends React.Component<any, any> {
);
}
_onFilter = filter => {
this.props.setFilter(filter);
};
_onChange = evt => {
this.setState({ labelInput: evt.target.value });
};