Clase platzi#4 - ¿Cómo se comunican los componentes? Props y atributos

Author: scharcode

src/App.js

@@ -4,22 +4,34 @@ import { TodoList } from './TodoList';
 import { TodoItem } from './TodoItem';
 import { CreateTodoButton } from './CreateTodoButton';
 import './App.css';
+import React from 'react';
+
+const defaultTodos = [
+  { text: "Cortar cebolla", completed: true },
+  { text: "Tomar el curso de ReactJS", completed: false },
+  { text: "Llorar con la llorona", completed: false },
+  { text: "Otra tarea pendiente", completed: false }
+];
 
 function App() {
   return (
-    <div className="App">
-
-      <TodoCounter />
+    <React.Fragment>
+    
+      <TodoCounter completed={16} total={25} />
       <TodoSearch />
 
       <TodoList>
-        <TodoItem />
-        <TodoItem />
-        <TodoItem />
+        {defaultTodos.map(todo => (
+          <TodoItem
+            key={todo.text}
+            text={todo.text}
+            completed={todo.completed}
+          />
+        ))}
       </TodoList>
 
       <CreateTodoButton />
-    </div>
+    </React.Fragment>
   );
 }
 

src/CreateTodoButton.js

@@ -1,8 +1,6 @@
 function CreateTodoButton() {
   return (
-    <button>
-      +
-    </button>
+    <button>+</button>
   );
 }
 

src/TodoCounter.js

@@ -1,7 +1,7 @@
-function TodoCounter() {
+function TodoCounter({ total, completed }) {
   return (
     <h1>
-      Completaste 3 de 5 TODOS
+      Completaste {completed} de {total} TODOS
     </h1>
   );
 }

src/TodoItem.js

@@ -1,8 +1,8 @@
-function TodoItem() {
+function TodoItem(props) {
   return (
     <li>
       <span>V</span>
-      <p>Llorar con la Llorona</p>
+      <p>{props.text}</p>
       <span>X</span>
     </li>
   );

src/TodoList.js

@@ -1,7 +1,7 @@
-function TodoList(props) {
+function TodoList({ children }) {
   return (
     <ul>
-      {props.children}
+      {children}
     </ul>
   );
 }