finished

react_app/app.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import TodoApp from './components/TodoApp'
 
 
-ReactDOM.render(<p> React works! </p>,
+ReactDOM.render(<TodoApp />,
   document.getElementById('root'));

react_app/components/InputBar.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+class InputBar extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {text: ''}
+  }
+
+  handleInput(e){
+    this.setState({text: e.target.value});
+    console.log(e.target.value)
+  }
+
+  handleSubmit(){
+    this.props.onSubmit(this.state.text);
+    this.setState({text: ''});
+  }
+
+  render(){
+    return (
+      <div>
+        <input
+          type="text"
+          onChange={(e) => this.handleInput(e)}
+          value={this.state.text}
+        />
+        <button onClick={() => this.handleSubmit()}> Add to do </button>
+      </div>
+    );
+  }
+}
+
+export default InputBar;

react_app/components/Todo.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+function Todo(props){
+  if(props.isCompleted){
+      return <li> <input type="radio" checked={props.isCompleted} onClick={() => props.onCheck()} />  <strike> {props.name} </strike>  </li>;
+  }
+  return <li> <input type="radio" checked={props.isCompleted} onClick={() => props.onCheck()} />  {props.name} </li>;
+}
+
+export default Todo;

react_app/components/TodoApp.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import InputBar from './InputBar';
+import TodoList from './TodoList';
+
+class TodoApp extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      data: [{name: 'Walk dog', isCompleted: false}, {name: 'Learn React', isCompleted: true}],
+    };
+  }
+
+  add(todoName) {
+    this.setState({
+      data: this.state.data.concat({name: todoName, isCompleted: false})
+    })
+    console.log('add went')
+  }
+
+  toggleCompleted(i) {
+    const newData = this.state.data.slice()
+    console.log(newData[i].isCompleted)
+    newData[i].isCompleted = !newData[i].isCompleted;
+    this.setState({data: newData});
+  }
+
+  render(){
+    return (
+      <div>
+        <InputBar onSubmit={(name) => this.add(name)} />
+        <TodoList toggle={(i) => this.toggleCompleted(i)} data={this.state.data} />
+      </div>
+    );
+  }
+}
+
+export default TodoApp;

react_app/components/TodoList.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Todo from './Todo';
+
+class TodoList extends React.Component {
+  constructor(props){
+    super(props);
+  }
+
+  render(){
+    return (
+      <ol>
+        {this.props.data.map((t, i) => {
+          return <Todo onCheck={() => this.props.toggle(i)} index={i} name={t.name} isCompleted={t.isCompleted}/>;
+        })}
+      </ol>
+    );
+  }
+}
+
+export default TodoList;