import React from 'react';
import { ITask } from './Task';
import TaskForm from './TaskForm';
interface IProps {
title ? : string;
}
interface IState {
tasks: ITask[];
}
class App extends React.Component < IProps, IState > {
constructor(props: IProps) {
super(props);
this.state = {
tasks: []
};
this.addANewTask = this.addANewTask.bind(this);
}
public addANewTask(task: ITask): void {
this.setState({
tasks: [...this.state.tasks, task]
});
}
render(): JSX.Element {
return (
<div>
<nav className="navbar navbar-light bg-light">
<a className="navbar-brand" href="/">{this.props.title}</a>
</nav>
<div className="container p-4">
<div className="row">
<div className="col-md-4">
<TaskForm addANewTask={this.addANewTask} />
</div>
</div>
</div>
</div>
);
}
}
export default App;
export interface ITask {
id ? : number;
title: string;
description: string;
completed: boolean;
}