No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Quedan menos de 24 hrs para aprender Inglés, AI y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
1 Hrs
32 Min
33 Seg
Curso de React.js

Curso de React.js

Juan David Castro Gallego

Juan David Castro Gallego

¿Cómo se comunican los componentes? Props y atributos

4/34
Recursos

Aportes 78

Preguntas 17

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Cuando se utiliza:

<React.Fragment></React.Fragment>

Es necesario importar, para que funcione:

import React from 'react';

Componentes => Reciben Propiedades.
Elementos => Reciben Atributos.


Hay que tener en cuenta que en JSX, la sintaxis entre atributos y propiedades es muy parecida, ya que escribimos el valor de las props en los componentes como si fueran atributos, pero estos no lo son…

Las props son variables que declaramos en nuestro componente como si fueran parámetros de una función, podemos declarar una unica (Prop) o declarar varias Props utilizando la {Desestructuración}.
Para luego posteriormente darles un valor como si fueran argumentos, pero utilizando otro tipo de sintaxis, que es muy parecida a la de los atributos de los elementos HTML, con la diferencia que el otorgamos el valor entre {llaves}.

En cuanto a la propiedad “props.children” esta hace referencia a que React transforma automáticamente a todo lo que se encuentre dentro del componente padre en un elemento “children” , es decir todo lo que se encuentre dentro de una etiqueta de apertura <Component> y una etiqueta de cierre </Component> para React será “Children”.

Por otro lado existe <React.Fragment> o su sintaxis más corta " <> </> " que es un contenedor invisible que tiene como objetivo envolver todos los componentes JSX dentro de un contenedor padre, esto es debido a que React necesita envolver esos componentes para renderizarlos, y asi no crear nodos innecesarios en el DOM.

Por ultimo, debemos tener en cuenta que podemos renderizar elementos a través de un Array, utilizando en este caso el metodo .map(), y devolviendo el componente “TodoItem” por cada uno de los objetos del array…
Es necesario que le pasemos las props “key={todo.text} text={todo.text}” al componente para que nos muestre un contenido distinto por cada objeto de este array.

La prop “Key” funciona como un Identificador para objeto del array y es necesaria cuando utilizamos el metodo .map()

Algo que personalmente me ha gustado es destructurar las props y a que evitan el estar repitiendo el props.text y hacen que el código sea más legible.

function TodoItem({text, completed}) {
 
    return (
        <li className="TodoItem">
            <span></span>
            <p>{text}</p>
            <span></span>
        </li>
    );
}

Clase 4 Como se comunican los componentes? Props y atributos

Nuestro componente TodoCounter recibira 2 propiedades destructuras total, completed, modificamos el componente de manera de el texto hardcodeado quede asi {completed} y {total} para hacer dinamico nuestro componente.

Ahora dentro del componente App.js donde invocamos al componente TodoCounter lo definimos: <TodoCounter completed={16} total={25}/>.
Estos cambios podemos verlos con las devtools del navegador ya que las props no se muestran como atributos en el HTML.

Propiedad Children

React automaticamente define como elementos hijo a los componentes y/o elementos que estan dentro de dos etiquedas jsx.

React.Fragment

Por defecto todo componente require ser exportado a un solo objeto, por esto es que los componentes deben estar encapsulados en una etiqueta:

<React.Fragment>
  ...
  ...
  ...
</React.Fragment>

Envio de arrays

Para poder enviar array definimos:

const defaultTodos = [
  { text: 'Diseño de proyecto', completed: false},
  { text: 'Diseño de Base de datos', completed: false},
  { text: 'Recopilación de requerimientos', completed: false},
  { text: 'Desarrollo', completed: false},
  { text: 'Implementación', completed: false},
]

Y luego dentro de nuestro componente App vamos definiendo las props que necesitaremos ver con TodoItem:

<TodoList>
  {defaultTodos.map(todo => (
    <TodoItem
      key={todo.text}
      text={todo.text}
      completed={todo.completed}
    />
  ))}
</TodoList>

Ahora en TodoItem iremos definiendo las props que necesitaremos (en mi caso tuve que destructurarlas por unos errores que me mostraban las devtools):

function TodoItem({text, completed}) {
  return (
    <li>
      <span>V {completed}</span>
      <p>{text}</p>
      <span>X</span>
    </li>
  );
}

Juan normalmente me gustan tus clases con tus ocurrencias mantienes el interés en los alumnos pero esta vez déjame quitarme el sombrero no se si todo en si fue obra tuya pero quisiera aprovechar de agradecer a todo el equipo de Platzi por este curso es espectacular ojala sigan actualizando los curso y le den este mismo formato.

Aquí mi componente de las tareas , lo hice un poco diferente al profesor utilizando solo un span y condicionando si la tarea esta completada o no.

import React from 'react'

export const ListItem = ({task,checked}) => {
  return (
    <>
    <span>{checked? '✔': 'X'}</span>
    <p>{task}</p>
    </>
  )
}

De los mejores profes de platzi!

Hostia Juan, me encanta tu forma de explicar descomponiendo poco a poco cada definición para no saturarnos de info.
n.n

realmente felicitaciones por la nueva forma de mostrar los cursos

Una forma de utilizar React.Fragment sin tener que importarlo. Es utilizando su shorcut de un tag vacío: <> ... </>.

Sino las formas de utilizar Fragment serian:

Import React from 'react';

...
<React.Fragment>
</React.Fragment>
...
import { Fragment } from 'react';

...
<Fragment>
</Fragment>
...

Para los que esten acostumbrados a usar:

items.map(item => {
  // codigo
})

Y les de el error de “array.prototype.map() expects a return value from arrow function”, se soluciona con:

items.map(item => (
  // codigo
))

Con las nuevas versiones de React ya no es necesario nombrar el componente <React.Fragment> para encapsular el resto de componentes que necesitemos, En su lugar simplemente podemos crear un ‘elemento vacío’ para encapsular el resto de compomentes de la siguiente manera:

function App() {
  return (
    <>
	//... todos los componentes que vayamos a encapsular dentro del componente App()
    </>

Me gusta su forma de programar, es bastante logica !!

una forma mas cómoda de exportar los componentes es

export function CreateTodoButton() {
    return (
        <button>Agregar Todo</button>
    );
}

a mi personalmente me gusta hacer un destructuring

function TodoCounter(props) {
  const {total, completed} = props
  return (
      <h1>
        Has creado {completed} de {total} TODOs
      </h1>
  )
}

!Lo mismos pasos y un poco diferente [](

Como yo entendí los props

.
Los React Props son la forma en la que se mandan propiedades (valores) a los elementos dentro de un componente, para que de esta forma el mismo sea interactivo y podamos interactuar para cambiar algún valor por medio de eventos en el DOM u otro método.
.
Para pasarle un prop a un componente hacemos lo siguiente, por ejemplo;

  1. Tengo un componente título que lleva la cuenta de cuántas tareas se han cumplido, esto hace parte de una aplicación de TO-DO. Como parámetro le estamos pasando un objeto en el que usamos la desestructuración, esto para traer las propiedades específicas que necesita el componente. Luego del primer ejemplo muestro cómo quedaría si usamos el parámetro “props”
    // Esta sintaxis solo trae los props que necesitamos por medio de
    // desestructuración.
    function TodoTitle({ total, completed }) {
    	return (
    		<h1>
      		Has completado {completed} de {total} TO-DOs
    		</h1>
     )
    }
    
    // Esta sintaxis nos trae todos los props que le pasemos al elemento
    // del componente padre, pero tendremos que escribir "más código"
    function TodoTitle(props) {
    	return ( 
    		<h1>
    			Has completado {props.completed} de {props.total} TO-DOs
    		</h1>
    	)
    }
    
  2. En el componente App, vamos al elemento que queremos pasarle los props, en este caso el elemento TodoTitle
    function App() {
    	return (
    <React.Fragment>	
    	// Acá le definimos al elemento las siguientes propiedades:
      	<TodoTitle  completed={16} total={25} /> 
    	// Estas propiedades serán los argumentos que reciba el componente
    	// TodoTitle
    
      <TodoSearch />
    
      <TodoList>
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </TodoList>
    
      <CreateTodoButton/>
    </React.Fragment>
    	);
    }
    

¿Qué son las props en React?

Las props son las propiedades de un componente. Son datos que se pasan de un componente a otro. Por ejemplo, si tienes un componente Button que muestra un botón, puedes pasarle una prop text para que el botón muestre ese texto:

function Button(props) {
  return <button>{props.text}</button>}

Podríamos entender que el componente Button es un botón genérico, y que la prop text es el texto que se muestra en el botón. Así estamos creando un componente reutilizable.

Debe considerarse además que al usar cualquier expresión JavaScript dentro de JSX debe envolverlos con {}, en este caso el objeto props, de otra forma JSX lo considerará como texto plano.

Para usarlo, indicamos el nombre del componente y le pasamos las props que queremos:

<Button text="Haz clic aquí" /><Button text="Seguir a @midudev" />

Las props son una forma de parametrizar nuestros componentes igual que hacemos con las funciones. Podemos pasarle cualquier tipo de dato a un componente, incluso otros componentes.

Sacado de Preguntas típicas de React.js

¡Saludos! Pueden hacer uso de PropTypes para llevar a cabo comprobaciones de tipo y proporcionar obligatoriedad a las props de sus componentes 🤞. Un ejemplo:

import PropTypes from 'prop-types';
// Tu componente TodoCounter y su lógica aquí...

TodoCounter.propTypes  = {
	total: PropTypes.number.isRequired,
	completed: PropTypes.number
}

TodoCounter.defaultProps = {
	total: 10,
	completed: 0
}

Pueden aprender más ingresando a la docu oficial 👓:
Proptypes en React

En nuevas versiones de React.js en ves de usar nuestro `import React from 'react'` `<React.Fragment>` `<NuestroComponente tag={"Hola Platzi"}/>` `</React.Fragment>` Podemos usar las etiquetas sin contenido, y React automaticamente las detectara como un Fragment, asi: `<>` \<NuestroComponente tag={"Hola Platzi"}/> ``

Trabajando con Propiedades en React

En la clase anterior, creamos un componente Todo Counter que muestra información estática. En esta clase, aprenderemos a trabajar con las propiedades (props) para comunicar componentes y hacer que la información sea dinámica.

Creación de Todos por Defecto

Vamos a trabajar con un array llamado defaultTodos que contendrá información sobre distintas tareas pendientes.

const defaultTodos = [
  { text: "Cortar cebolla", completed: false },
  { text: "Tomar el curso de ReactJS", completed: true },
  { text: "Llorar con la llorona", completed: false },
  { text: "Otra tarea pendiente", completed: true },
];

Renderizando con React Fragments

En React, necesitamos envolver nuestros componentes en un solo elemento al devolverlos en el método render. Para esto, utilizamos React.Fragment.

return (
  <React.Fragment>
    {/* Componentes a renderizar */}
  </React.Fragment>
);

Renderizando con Arrays y Props

Vamos a utilizar map para renderizar múltiples elementos a partir de un array. Cada elemento del array será un componente Todo Item.

return (
  <React.Fragment>
    {defaultTodos.map((todo) => (
      <TodoItem key={todo.text} text={todo.text} completed={todo.completed} />
    ))}
  </React.Fragment>
);

Manejo de Propiedades en TodoItem

En el componente TodoItem, recibimos las props text y completed y las utilizamos para mostrar información dinámica.

const TodoItem = (props) => {
  return (
    <div>
      <p style={{ textDecoration: props.completed ? "line-through" : "none" }}>
        {props.text}
      </p>
    </div>
  );
};

Key Prop y Advertencias

Cada elemento en una lista debe tener una propiedad key única. Utilizamos la propiedad text de los todos como clave.

<TodoItem key={todo.text} text={todo.text} completed={todo.completed} />

Beneficios de las Props en React

  • Reutilización de Componentes: Las props permiten que un componente pueda mostrar información dinámica y ser reutilizado para distintos propósitos.
  • Comunicación entre Componentes: Facilitan la comunicación entre componentes al pasar información de uno a otro.
  • Dinamismo en la Interfaz: Permite que la interfaz sea más dinámica y se actualice según la información recibida.

Próximos Pasos

  • Experimenta con diferentes propiedades y valores en los componentes para comprender mejor cómo se comunican entre sí.
  • Explora más sobre el manejo de arrays en React y cómo trabajar con listas dinámicas.
  • Continúa aprendiendo sobre React y sus conceptos fundamentales.

¡Ahora estás listo para utilizar propiedades en React y hacer que tus componentes sean más flexibles y reutilizables!

Hay otra alternativa, y es minimizando el \<React.Fragment>\</React.Fragment>.  solo deben poner <> *su codigo o componentes* \ esto les funcionara de la misma manera, aquí les dejo un ejemplo: ```js <> <TodoCounter completed={16} total={25}/> <TodoSearch/> <TodoList> {defaultTodos.map(todo => ( <TodoItems key={todo.Text} text={todo.Text} completed={todo.completed} /> ))} </TodoList> <CreateTodoButton/> ```

hermano el video lleva trabandose como 4 horas ya no puedo ni soporto esto mi conexión no es un problema funciona con cualquier cosa pero esto es insufrible

Como renderizar varias elementos de un array como componentes en React

  1. crear el array, puede tener objetos
  2. Mediante llaves llamar al array y recorrerlo con el metodo map, porque es necesario que devuelva otro array de elementos que es lo que va a renderizar React
  3. En cada vuelta o recorrido mediante .map crear un elemento de React (ejm: <TodoItem />
  4. Es necesario que cada Componente que se esta enviando tenga una propiedad key unica
const defaultTodos = [
  { text: 'Cortar cebolla', completed: false},
  { text: 'Curso introduccion a React JS', completed: true},
  { text: 'Lavar zapatos', completed: false},
  { text: 'Comprar mercado', completed: true},
]

function App1() {
  return (
    <TodoList>
			{/* Recorrer con un .map
      para devolver otro array de elementos React */}
      {defaultTodos.map(todo => (
        // cada elemento debe tener un key unico
        <TodoItem key={todo.text} titulo={todo.text} />
      )
      )}
    </ TodoList>
  );
};

React.Fragment

Se utiliza como una etiqueta que envuelve varios elementos o componentes de React y los envia mediante un return al componente raiz sin que esten agrupados en una etiqueta especifica.
En react directamente no se puede hacer return a varios elementos al mismo tiempo, pero mediante React.Fragment es posible simular esto.

// Es necesario hacer un import de React
import React from 'react';

function App() {

  return (
		// Etiqueta React.Fragment para envolver los elementos a retornar
    <React.Fragment>
      <TodoCounter completed={16} total={25} />
      <TodoSearch />
      <TodoItem titulo={'lavar la ropa'} />
      <CreateTodoButton />
    </React.Fragment>
  );
};

<>

</>

Es una abreviación para React.Fragment

![](

yo la utilizo asi

function TodoCounter(props){
return (
<h1>
Has completado {props.completed} de {props.total} TODOS
</h1>
)
}

export { TodoCounter }

El Fragmento (“react fragment”) también se puede definir de la siguiente manera:

<>
</>

Eso es lo mismo que:

<React.Fragment></React.Fragment>
\<aside> ♻️ Que son props y componentes en REACT JS? \</aside> Los "props", abreviatura de propiedades, son una forma de pasar datos de componentes padres a componentes hijos. Los atributos, por otro lado, son utilizados para definir características específicas de los elementos HTML en React, como 'className' en lugar de 'class'. Tanto props como atributos facilitan la transferencia de información y modificaciones entre componentes, permitiendo así una mayor interactividad y dinamismo en las aplicaciones de React.
Otra opción para el key es colocar el index del elemento dentro del array, de esta manera se garantiza que no se repite de ninguna manera ```js <TodoList> {defaultTodos.map((todo, i) => ( <TodoItem key={i} text={todo.text}/> ))} </TodoList> ```
Hola chicos 💜 Para ponerme a mí mismo un desafío, quise agregar un pequeño sistema de generación de identificadores a cada tarea, en la documentación de React se menciona el uso del método crypto.randomUUID asi que lo implementé. **Mi generateUniqueId.js** ![](code.png)![](https://i.ibb.co/1mTdQfy/code.png) **Mi App.js** ![](https://i.ibb.co/fQcRvHP/code2.png) Puse imágenes porque los bloques de código en los aportes van fatal, pls TeamPlatzi, revisen eso 😭
Cuando vayas a usar: `<React.Fragment></React.Fragment>` Tienes que importar React asi: `import React from 'react'` Pero también puedes importar solo el Fragment asi: `import {Fragment} from 'react'` y usarlo asi: `<Fragment></Fragment>`
"Yo solo me quería ir a llorar una vez con la llorona, no cuatro" 😂😂😂

Agradecida conmigo misma por haber tomado el curso de Manipulacion de Arrays antes de venir a este.
Te lo recomiendo 100%.

**Mi Aporte para el bóton con un poco de diseño de bootstrap y fontawesome** ```js function CreateButton(){ return( <button className="btn btn-primary">Crear </button> ) } export default CreateButton; ```function CreateButton(){    return(      \<button className="btn btn-primary">Crear \\\</button>    )  } export default CreateButton;
# Resultado ![](https://static.platzi.com/media/user_upload/image-d7128788-0b23-4d65-b2c8-865983ea72ef.jpg) ## App.js `import logo from './platzi.webp';import './App.css';import React from 'react';import { TodoList } from './TodoList';` `const todos = [  { text: "Hacer la compra", completed: false },  { text: "Preparar la presentación", completed: true },  { text: "Hacer ejercicio", completed: false },  { text: "Leer un libro", completed: false },  { text: "Enviar correos electrónicos", completed: true },  { text: "Aprender un nuevo lenguaje de programación", completed: false },  { text: "Organizar el escritorio", completed: true },  { text: "Realizar llamadas telefónicas", completed: false },  { text: "Ver una película", completed: false },  { text: "Planificar las vacaciones", completed: true }];` `function App() {  return (    <>      {/* <CreateTodo/> */}      <TodoList todos={todos}/>          );` `  }` `export default App;` ## TodoList.js `import { TodoItem } from "./TodoItem"; ` `function TodoList({todos}){    return(       
                {                todos.map(todo => (                    <TodoItem key = {todo.text} text = {todo.text} completed = {todo.completed} />                ))            }       
    );}` `export {TodoList}` TodoItem.js `function TodoItem({text, completed}){    return (       
  •             {completed ? "✅" : "❌"}            {text}            🗑️       
  •      );}` `export {TodoItem}` -------------------
    function TodoItem({text, completed}){    return (        \
  •             \{completed ? "✅" : "❌"}\            \{text}\            \🗑️\        \
  •      );} export {TodoItem}

    en el minuto 13:04 a Juan se le paso decir que al crear un elemento de react este “auto importa” su libreria cuando se tabula, como pueden ver en esa parte del video, cuando juan teclea “<React.” y preciona tab, en la parte de arriba debajo de el import de css se importa ‘react’ automaticamente y es necesario para poder usar el <React.Fragament>

    El tema con el prop KEY, es para que React tenga una trazabilidad de las cosas que se agregan o se retiran del DOM. Llegada la situación dónde tenemos en este ejemplo muchas TODOS con el mismo KEY y tenemos varias acciones como completar, borrar, etc, Reactivarles no sabría con exactitud a que elemento del DOM se le aplica la acción

    Mi aporte para que en el titulo se cuenten las tareas completadas y el total  \<TodoTitle total={defaultTodos.length}  completed = {defaultTodos.filter(todo=> todo.completed===true).length}  /> ```jsx <TodoTitle total={defaultTodos.length} completed = {defaultTodos.filter(todo=> todo.completed===true).length} /> ```
    ```js function CreateTodoButton(){ return ( <input type="button" value=" +" /> ) } export {CreateTodoButton} ```

    Utilice la misma forma solo que no le puse el nombre Create y gracias a lo bien que explicas logre hacerlo solo en el reto.

    CreateTodoButton.js

    function CreateTodoButton(){
    return (
    <button> crear nuevos todo’s ome</button>
    );

    }
    export { CreateTodoButton };

    y lo importo mucho mas facil con el atajo que nos enseñaron que es ctrl + espacio y se crea solo la importacion, super breve y buena la clase.

    Es posible usar a cambio de

    <React.Fragment>
    	Componentes
    </React.Fragment>
    

    Cambiar esto por

    <>
    	Componentes
    </>
    

    Y nos funcionara de la misma forma

    Muy buena clase
    function CreateTodoButton(){
        return(
            <button>+</button>
        );
    }
    export {CreateTodoButton}
    

    Excelente curso.

    en lugar de react.fragment también se pueden usar etiquetas vacías
    <>
    <ToDoCounter completed={16} total={25} />
    <ToDoInput />

      <ToDoList>
        <ToDoItems />
        <ToDoItems />
        <ToDoItems />
      </ToDoList>
    
      <CreateToDoButton />
    </> 

    ⚛️ Estas clases son genial! Super fáciles de entender y ni se siente el tiempo de cada clase.

    También se pueden omitir los paréntesis que Juan puso para encerrar el TodoItem

    ANTES

    {defaultTodos.map(todo => (
              <TodoItem todo={todo} key={todo.id}/>
            ))}
    

    DESPUÉS

    {defaultTodos.map(todo => 
              <TodoItem todo={todo} key={todo.id}/>
            )}
    

    Propongo que en lugar de colocar key=todo.text, usemos el map para capturar el indice actual del array y lo pasemos al key. Creo que quedaría más organizamos y evitamos un posible error de dos tareas que se llamen igual.

    <TodoList>
            {defaultTodos.map((todo, index) => (
              <TodoItem key={index} text={todo.text} state={todo.completed} />
            ))}
    </TodoList>
    

    ¡Excelente! Con esta clase entendi mucho más sobre como funiconan los componentes

    no se visualiza nada de mi pagina
    Porque no creas los componentes en el expolorer para que podamos avanzar con tu pantalla,...? tenemos la pantalla CRASHEADA y el unico que avanza es tu video..! es decir todo lo que dices no lo sincronizamos ...la pantalla crasheada o es una estrategia ..? Yo he consultado con otra fuente para poder continuar...!
    normalmente en src se crea un folder nombrado componentes y dentro de componentes vamos creando los componentes.tsx, asi no se crashea el space work y podemos seguir avanzando. así como el profe comienza se crashea la pantalla y si estamos comenzando no distinguimos que P.. esta pasando..!
    ## 🦄✨ Para la parte de de validar si se ha completado o no, lo hice de la siguiente manera: ```js function ToDoItem(props) { let completed = ''; completed = props.completed ? () : (); return (
  • {props.text}

    {completed}
  • ); } export { ToDoItem }; ```Con bootstrap Icons es muy cómodo c:
    Para la identificación de la key de los elementos, me parece mejor obtar por identificarlo con su "index". Con este garantizamos que será único e irrepetible en el array, ya que el texto (por ahora sabremos que será diferente, ya que es harcodeado) no es garantía de que no se repita. ```js function App() { return ( <React.Fragment> <TodoCounter completed={16} total={25} /> <TodoSearch /> <TodoList> {defaultTodos.map( (todo, index) => ( <TodoItem key={index}/> ))} </TodoList> <CreateTodoButton/> </React.Fragment> ); } ```
    otra forma para enviar la key sin que no de fallo futuro cuando 2 textos tengan el mismo nombre es usar su indice  ```js { defaultTodosInfo.map(({ text, completed }, id) => ( <TodoItem text={text} completed={completed} key={id} /> )) } ```
    Aporte para el boton con un poco de diseño ```js function CreateButton(){ return( <button className="btn btn-primary">Crear </button> ) } export default CreateButton; ```

    Decidí volver a este curso pensando que si no quería hacer la Todo-App, me podía enfocar en el aspecto teórico. Pero es que en esta clase ni si quiera explican qué son las props, solo empiezan a trabajar en ellas. Aparte 25 minutos ?? Nada, vuelvo al curso de Next Js que no cometen este error y entendí las props por investigar fuera de Platzi. Este curso 0/10.

    Hola, como están, no sé por qué cuando intento concluir con parámetros en el archivo TodoCounter.js, es decir, `function TodoCounter(completed, total), ` y importando los valores en el archivo app.js; `<TodoCounter completed={16} total={25} /> ` me aparece la página en blanco cuando la ejecuto aclaro que sin poner los parámetros me venia mostrando :P desde ya, gracias.
    yo definitivamente no he podido con este profesor
    ![](https://static.platzi.com/media/user_upload/image-7e056b61-b67c-47eb-a7da-deb71e5506a6.jpg)Acostumbro a crear mis componentes de esta forma. De hecho puedo en ocasiones resumirlo aprovechando las arrow functions: ![](https://static.platzi.com/media/user_upload/image-54cd2ed7-fbce-4e77-a93c-731a28a3bacc.jpg) Y para los amantes de la siguiente extensión(Yo el primero): ![](https://static.platzi.com/media/user_upload/image-4bd60b34-e20e-482a-ae2e-5d63fac15f32.jpg) Pueden usar la combinación de teclas rafc(React Arrow Function components). Gracias por apoyarme en mi canal, aún aprendiendo para crecer en comunidad: <https://www.youtube.com/channel/UCiofAhVDBU6UqJDARXe6gXA>
    jajjajjaja que risa como hace los ejemplos, me parece genial aparte que te hace entender cuando es algo reservado por el sistema o cuando puedes poner lo que tu quieras. me gusto
    Para este momento en Octubre de 2023 Al map hay que colocarle un Return()
    Los fragments tambien los podemos escribir asi: ```js <> <TodoList> <TodoItem /> <TodoItem /> <TodoItem /> </TodoList> ```
    El profe usa el text como key, pero desde mi punto de vista hay una mejor forma de hacerlo y asi evitamos cualquier problema en el cual dos textos sean iguales y dos key por ende sean semejantes<*TodoList*>        {todolist.map((*todo*, *index*)=>(          <*TodoItem* *key*={*index*} *text*={*todo*.text}/>        ))}      \</*TodoList*> ```js <TodoList> {todolist.map((todo, index)=>( <TodoItem key={index} text={todo.text}/> ))} </TodoList> ```De esa forma se almacena el index de cada objeto del map, y como no puede haber dos objetos en el mismo index, aseguramos que el Key de nuestra iteracion realmente seria unico
    A la fecha esta un poco desactualizado el curso, ya no se ultiliza el **Fragment**

    una forma de como hacerlo mas ordenado en el mismo componente de TodoItem.jsx

    import React from 'react'
    
    export function TodoItem() {
        const defaulTodo =[
            {text:'apreder jsx', completed:false},
            {text:'hacer proyecto de restaurante', completed:false}
        ];
      return (
        <div>
           {defaulTodo.map(todo =>(
            <li key={todo.text}>
                <span>v</span>
                <p>{todo.text}</p>
                <span>x</span>
            </li>
           ))}
        </div>
      )
    }
    

    Ayuda???:![](

    Si saben inglés les recomiendo 100% este video que lo explica muy bien también y con la lógica detrás del proceso
    https://www.youtube.com/watch?v=PHaECbrKgs0

    Hola solo vengo a decir gracias por actualizar este curso asi como la ruta, ya era hora de actualizar y cambiar algunos de los contenidos que no eran muy optimos sigan asi , grandes Team platzi

    Se puede reemplazar

    <React.Fragment></React.Fragment>
    

    Por

    <></>
    

    Que significa lo mismo

    Cuando usamos el método .map, podemos hacer uso del segundo parametro index que nos ofrece el map, para usarlo en la propiedad key. defaultTodos.map( (todo, index) => ( <TodoItem key={index} /> )

    Resaltar que en React se usa parentesis () para envolver la función de una arrow function, a diferencia de JS Vanilla que usa las llaves {}

    Una alternativa a usar el React.Fragment es usar la sintaxis abreviada <></>

    function App() {
      
      return (
        <>
    
          <TodoCounter total={25} completed={2}/>
          <TodoSearch />
    
          <TodoList>
            <TodoItems />
            <TodoItems />
            <TodoItems />
          </TodoList>
          <TodoCreateButton ></TodoCreateButton> 
        </>
      );
    }