Section 5: Rendering Lists & Conditional Content

Question 1

List childs and keys:

Answer 1

React tiene un concepto especial cuando se trata del rendering de listas de data un concepto que existe para asegurar que React es capaz de actualizar y renderizar dichas listas sin perder rendimiento, o tener bugs.

Question 2

¿Cómo React renderiza los elementos de una lista?

Answer 2

React suele renderizar el nuevo elemento como el último elemento de una lista de divs y actualiza todos los elementos y reemplaza su contenido de forma que de nuevo sean iguales al orden y el contenido de los elementos en mi arreglo. Esto sucede porque para React todos los elementos se ven similares.

La forma de decirle a React a dónde debe ser agregado el nuevo elemento de nuestra lista es agregándole el special prop llamado KEY.

Question 3

Regla listas y map()

Answer 3

Nota: siempre hay que agregar KEY cuando se hace un map de una lista de items.

Question 4

Conditional Content

Answer 4

Conditional Content trata sobre mostrar distinto contenido bajo condiciones diferentes.

Question 5

Nota sobre long statements y place holders

Answer 5

Nota: “long statments” no son permitidos entre place holders {}. Ejemplo: condiciones if… else… o for loops. Pero si podemos usar un operador ternario.

Question 6

Conditional Return Statements

Answer 6

Si todo mi código JSX va a cambiar, puedo usar un if… check para retornar un JSX diferente:

Question 7

Adding Dynamic Styles

Answer 7

Puedo agregar estilo CSS de forma dinámica usando doble curly braces {{}} declaradas en un atributo tipo style. El primer curly brace indica el elemento css y el segundo es para indicar el objeto css; este style recibe un objeto CSS.

Ej:

<div></div>