(Medium) Front-End Separation

RenameIsDoneToStriked.diff

//=============================
// THE API BACK-END PROJECT
//=============================

const todoListPageResponseBody = {
 header: 'John Doe',
+ list: [{
+    text: 'Go to shop',
+    striked: true
+  }, {
+    text: 'Buy some clothes',
+    striked: false
+  }, {
+    text: 'Buy food',
+    striked: false
+  }]
+};

// ...

//=============================
// THE CLIENT FRONT-END PROJECT
//=============================

// ...

render() {
    const todoListPage = this.props.todoListPage;
    return <section>
      <h1>{todoListPage.header}</h1>
      <ul>
+        {todoListPage.list.map((item) => {
+          return <li>
+            { item.striked ? <strike>{item.text}</strike> : item.text }
-        {this.props.todoList.map((item) => {
-          return <li className={item.isDone ? 'todo-done' : ''}>
-            {item.text}
          </li>
        })}
      </ul>

// ...