#alguien me puede colaborar con este
hushed yarrow
prueba con el optional chaining
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
hushed yarrow
y no se como moverle
por lo que veo estas con nextjs
queen garden
yepa
hushed yarrow
ese archivo [name].js es muy util para recibir cualquier nombre de pokemon que quieras pasarle por ruta get
queen garden
yepa
hushed yarrow
pss tocaria recuperar de las props
hushed yarrow
bueno aqui algo de la doc de next
https://nextjs.org/docs/routing/dynamic-routes
pero en resumen tieens que usar
un hook useRouter
hushed yarrow
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { pid } = router.query
return <p>Post: {pid}</p>
}
export default Post
este es un buen ejemplo
imagina que tienes una ruta http://localhost:3000/api/pokemon/<nombredetupokemon>
para recuperar ese nombre
del archivo q estas editando
[name].js
import { useRouter } from 'next/router'
const Post = () => {
const router = useRouter()
const { name } = router.query
return <p>Pokemon {name}</p>
}
export default Post
el fetch es paso siguiente
queen garden
mmmmmmmm
hushed yarrow
prueba intentando obtener el name de useRouter
hushed yarrow
pasa codigo a ver
queen garden
hushed yarrow
pss el hook de useRouter lo llamas dentro de un componente de tipo pagina
hushed yarrow
xD
next es un tanto complejo si no tienes algo base solida con react
moviste el codigo del [name].js a app.js verdad?
hushed yarrow
pero puedes ver en console log el pokemon al cual le hiciste fetch?
en la funcion getServerSideProps?
hushed yarrow
🤔 entonces si hace el llamado pero no puede leer las propiedades
hushed yarrow
pero en este si redirige el nombre
ese error que tienes es que cuando haces .map necesitas pasarle una prop key=""
por cada uno que renderizes
hushed yarrow
no en el map
hushed yarrow
<p key="algunId"> </p>
hushed yarrow
en tu caso podrias ocupar algun index,pero no es recomendado
hushed yarrow
id, te va marcar un error
hushed yarrow
tusDatos.map(function(item, i){
return <p key={i}>Algo</p>
})
te podria servir agarrando el index que recuperas del map
y pasarlo como key
hushed yarrow
donde lo puedo poner?
XD
pss cada vez que renderizes con un .map
el component o el elemento jsx debe tener un key para evitar problemas de renderizados en el arbol de elementos
hushed yarrow
el component o el elemento jsx debe tener un key para evitar problemas de render...
o al menos es lo que sugiere react
queen garden
o al menos es lo que sugiere react
mira trate de hacer esto
no se si me puedes ayudar
como lo defino mmm
hushed yarrow
que era el bug
hushed yarrow
es por que creo que la api de pokemon te da un array con las abilidades agrupadas, vdd?
queen garden
es por que creo que la api de pokemon te da un array con las abilidades agrupada...
yepa
ahora es una bobada jajaja
ya hice la mayoria
como centro esto?
lo rojo
hushed yarrow
como centro esto?
flexbox?
queen garden
flexbox?
oye
ya es lo ultimo y no te molesto mas lo juro
sabes como asociar una ruta como pagina principal
para que al momento de darle f5
no se valla al index.js?
hushed yarrow
pss esta el router de next
hushed yarrow
sabes como asociar una ruta como pagina principal
esto lo acabo de probar
pss me funciona
claro seria forzando a que del root se vaya a otra pagina
un redirect
pero si quieres tener como pagina por defecto tendrias que ver que esa pagina sea tu index.js que esta dentro de pages
next lo va interpretar como "/"