Ahora, para generar nuestra lista de objetivos, aquí en la vista, quiero simplemente generar un par de componentes de texto por ahora, donde
simplemente imprimo mi objetivo y, para hacerlo, podemos ingresar una expresión dinámica aquí con llaves de apertura y cierre simples y ahora nos referimos a
los objetivos del curso, que
es esta variable que obtuvimos aquí con la desestructuración de la matriz. Los objetivos del curso son nuestra variedad de objetivos y ahora,
al igual que en React normal,
que es una diferenciación que realmente no me gusta porque estamos usando React normal aquí al final, así que
tal como lo
sabes de React para proyectos web, ahora puedes mapee esta matriz de datos en una matriz de componentes con el
método de mapa, que es un método Javascript normal. El método map toma una función que se ejecuta en cada
elemento de la matriz, por lo
que aquí
obtenemos nuestro objetivo y luego tiene que devolver un nuevo componente aquí. Nuevamente, usaré esta sintaxis de función de flecha en
línea donde, en lugar de tener llaves y luego devolver algo, omito las llaves y omito la
declaración de retorno, esta es una sintaxis válida de JavaScript, esto
también devolverá lo que ingrese aquí.
Lo que quiero devolver es un componente de texto, por lo
que este componente de texto que importamos de React Native y con esto, ahora podemos generar nuestro objetivo aquí porque un objetivo en los objetivos del curso solo será
un texto porque lo que agregamos a los objetivos del curso es el objetivo ingresado y el objetivo ingresado es
lo que obtenemos de la entrada de texto y eso es solo texto.
Así que aquí, ahora solo estamos enviando algo de texto y estoy asignando todos mis objetivos del curso
en componentes de texto que se mostrarán en esta vista aquí. Y con eso, si guardamos esto, ya deberíamos
poder comenzar
a agregar algunos objetivos, así que aprender React Native es una cosa que puedo ingresar aquí, presionar agregar
y aquí está, aprenderlo
de verdad y también obtenemos esto y si también quieres hacer
algunos panqueques, puedes hacerlo también y, por supuesto, esto también funciona en
iOS, aprender React Native de verdad y, por supuesto, todavía quiero hacer algunos panqueques.
Así que esto está funcionando y así es como podemos generar una lista simple y muy trivial de elementos aquí.
Ahora, por supuesto, estos elementos se ven bastante aburridos, así que tal vez podamos aplicar un poco de estilo allí
para que se vean mejor. Sin embargo, antes de hacerlo,
tenga en cuenta que tenemos un error aquí en nuestro terminal.
Ahora nuestra aplicación funciona claramente, pero el error que estamos obteniendo aquí es que cada niño en una
lista debe tener un accesorio clave único y esa es una regla de reacción normal, nada específico de React Native.
De hecho, siempre debe, al asignar esto a una lista de widgets, asignar una clave aquí para que React pueda actualizar
eficientemente esta lista detrás de escena si es necesario. Para ello, agregue un accesorio de clave aquí y luego
la clave debe ser un identificador único, por ahora
vamos con el objetivo en sí que no es estrictamente único, podría ingresar el mismo
objetivo con el mismo texto dos veces, lo que le daría un error, pero
por ahora supongamos que no está haciendo eso,
por lo tanto, podemos usar el objetivo como clave y, si lo hacemos, nos desharemos de esa advertencia.
Si ahora aprendí React Native, puedo agregar esto sin un error.
Nuevamente, si agrego el mismo texto dos veces, técnicamente ni siquiera recibo un error aquí, pero esto estaría mal,
aquí
está, aquí está el error porque obtuve dos hijos con la misma clave.
Entonces, por ahora solo asumiremos que no haces
eso, esa es la regla clave normal que tienes también en React normal.
Entonces, supongamos que no ingresa el mismo objetivo dos veces y continuemos con el diseño de estos elementos porque
en este momento, no se ven demasiado emocionantes.