colocando opção de status na tarefa

Author: alissonjr

README.md

@@ -6,6 +6,8 @@ App estilo SPA para fins de aprendizado da tecnologia React.js
 
 Um simples ToDo (lista de tarefas)
 
+![screen](https://github.com/alissonjr/todo-first-react-app/blob/master/model-screen.jpg)
+
 ## About Me
 
 Alisson Costa de Oliveira Júnior

model-screen.jpg

@@ -7,9 +7,16 @@ class Task extends Component {
     render () {
         return (
             <tr>
-                <td>
+                <td class="text-left">
                     { this.props.task }
                 </td>
+                <td>
+                    <select class="custom-select">
+                        <option value="" selected>To Do</option>
+                        <option value="">Doing</option>
+                        <option value="">Done</option>
+                    </select>
+                </td>
                 <td>
                     <button onClick={() => {this.props.deleteTask(this.props.id)}} class="btn btn-sm btn-danger">Delete</button>
                 </td>

src/components/task/index.jsx

@@ -7,12 +7,12 @@ class TaskBar extends Component {
     render () {
         return (
             <div class="container">
-                <form class="form-inline">
+                <form class="form-inline" action="javascript:return void;" onSubmit={()=>this.props.addTask(this.refs.task.value)}>
                     <div class="form-group mb-3">
                         <label for="task" class="sr-only">New Task</label>
                         <input type="text" name="task" ref="task" class="form-control" placeholder="add your tasks here" />
                     </div>
-                    <button type="button" onClick={()=>this.props.addTask(this.refs.task.value)} class="btn btn-primary mb-3 ml-2">Add Task</button>
+                    <button type="button" class="btn btn-primary mb-3 ml-2">Add Task</button>
                 </form>
             </div>
         );

src/components/taskBar/index.jsx

@@ -11,6 +11,7 @@ class TaskList extends Component {
                 <thead>
                     <tr>
                         <th>Task</th>
+                        <th style={{width: '200px'}}>Status</th>
                         <th style={{width: '150px'}}>Actions</th>
                     </tr>
                 </thead>