midudev / preguntas-entrevista-react

Preguntas típicas sobre React para entrevistas de trabajo ⚛️

Home Page:https://reactjs.wiki

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Duda sobre la explicación a la pregunta ¿Qué es el renderizado de listas en React?

vab1997 opened this issue · comments

En la respuesta a la pregunta:
https://github.com/midudev/preguntas-entrevista-react#qu%C3%A9-es-el-renderizado-de-listas-en-react, dice "El componente List recibe una prop ítems que es un array de strings.", mirando el código, en la prop key del li, se muestra <li key={item.id}>{item}</li>, me generó la duda si hay un error por lo que se estaría accediendo a una propiedad que no tiene el item(item.id) ya que es un array de string. Tengo entendido que el valor de key no podría ser tampoco <li key={item}>{item}</li> por lo que debería ser única y React estaría arrojando un warning porque puede haber 2 ítem con el mismo valor y por lo tanto React no tendría esa referencia entre renderizado.

Hola,
estoy de acuerdo, la prop que recibe el componente List no debería ser un array de strings si se intenta acceder a una propiedad "id". Creo que debería ser un array de objetos tipo:

[
  {
    id: 1,
    value: 'Elemento 1'
  },
  {
    id: 2,
    value: 'Elemento 2'
  }
]

En este caso se podría utilizar la propiedad id que sería única para la key y value para mostrar en el elemento li:
<li key={item.id}>{item.value}</li>.

Como se explica más adelante, si lo que se recibe es un array de strings cuyo contenido no va a ser alterado (ni se añaden ni se eliminan elementos) se podría omitir quizás la prop key ya que react utiliza por defecto el index como key, o buscar otra forma de asignarle una key única.

tarde pero seguro. aqui el PR para este tema #51

@midudev @vab1997 podemos cerrar este issue please