Alguien que me pueda ayudar para iterar | midudev - Aprende y Mejora en Programación JavaScript | Page 1

rich spire Feb 12, 2024, 6:11 AM

#

MiniProject.astro:

#

MoreProjects.astro:

#

📎 MiniProject.astro 📎 MoreProjects.astro

#

📎 projects.json

zealous tapir Feb 12, 2024, 9:50 PM

#

Podria ser un error al importar el archivo

#

revisa bien la ruta

#

Algo que note en el codigo es que no estas usando una ruta dinamica, estas importando algo en tu pc luego cuando subas el proyecto tendras problemas con eso que estas importando

zealous tapir Feb 12, 2024, 9:52 PM

#

rich spire MoreProjects.astro:

Veo que estas renderizando bien, lo mas seguro es que no estes importando correctamente el json

rich spire Feb 12, 2024, 9:57 PM

#

pero si le hago un console.log si me lo muestra bien

rich spire Feb 12, 2024, 9:57 PM

#

zealous tapir Algo que note en el codigo es que no estas usando una ruta dinamica, estas impor...

ese logo no está en uso

rich spire Feb 12, 2024, 10:35 PM

#

probé usando un array dentro y no un json y pasa exactamente lo mismo

rich spire Feb 14, 2024, 10:22 PM

#

.

sharp current Feb 14, 2024, 10:43 PM

#

Ya lo veo

#

@rich spire No entiendo

#

xd

#

Por eso nadie quiere entrar a pedirte más explicaciones

#

Cuentame

rich spire Feb 14, 2024, 10:47 PM

#

básicamente no me deja iterar el array para darle al componente las props

#

osea

#

{
projects.map(({ name, image, url, github }) => (
<MiniProject
name={name}
image={image}
url={url}
github={github}
/>
))
}

#

esto no funciona

sharp current Feb 14, 2024, 10:48 PM

#

Vale, ¿corregiste ese import que haces a partir del disco C?

rich spire Feb 14, 2024, 10:48 PM

#

si

#

eso no se usaba

sharp current Feb 14, 2024, 10:48 PM

#

Mandame screenshots, no lo hagas con esa herramienta porque no me muestra sintaxis de astro

rich spire Feb 14, 2024, 10:48 PM

#

si yo hago esto:

#

for (var i = 0; i < projects.length; i++) {
console.log(projects[i])
}

#

si funciona

#

me sale los 3 elementos del array en consola

sharp current Feb 14, 2024, 10:49 PM

#

Claro, pero después le dices al profe: "en mi pc sí funcionaba"

#

xd

rich spire Feb 14, 2024, 10:49 PM

#

#

#

los errores de módulo son errores de WSL

#

todo eso funciona bien

#

todo está importado bien

sharp current Feb 14, 2024, 10:50 PM

#

los datos los tienes en projects?

#

muestra la consola

rich spire Feb 14, 2024, 10:51 PM

#

#

#

esto es lo que pasa

#

no se itera realmente

sharp current Feb 14, 2024, 10:51 PM

#

Pero el primero sí muestra?

rich spire Feb 14, 2024, 10:51 PM

#

si

#

bueno en realidad es todavía más raro en eso

#

no se muestra el primero

#

se muestra uno

#

pero no tiene porque ser el primero

#

si querés muestro como se ve en el inspeccionar elemento

sharp current Feb 14, 2024, 10:54 PM

#

Intenta iterar solo el nombre:

{ 
  projects.map(({ name }) => (
    <p>{name}</p>
  ))
}

rich spire Feb 14, 2024, 10:54 PM

#

funciona si

sharp current Feb 14, 2024, 10:54 PM

#

foticos

#

para ver

rich spire Feb 14, 2024, 10:54 PM

#

sharp current Feb 14, 2024, 10:55 PM

#

Ahora:

{ 
  projects.map(({ image}) => (
    <img src={image} />
  ))
}

rich spire Feb 14, 2024, 10:56 PM

#

funciona

sharp current Feb 14, 2024, 10:56 PM

#

Entonces

#

el problema está en el component

#

Muestrame el componente

rich spire Feb 14, 2024, 10:57 PM

#

#

yo añadí la parte de props porque lo usaba tanto así midu (de donde estoy aprendiendo astro) como en otros lados

sharp current Feb 14, 2024, 10:58 PM

#

rich spire yo añadí la parte de props porque lo usaba tanto así midu (de donde estoy aprend...

Sí, correcto

#

Intenta borrando todo lo que tenga que ver con iconos

#

a parte el projectData no tiene nada que hacer ahí

rich spire Feb 14, 2024, 11:00 PM

#

ya

#

borré todo eso

sharp current Feb 14, 2024, 11:01 PM

#

y ¿Qué paso? 🗣️ xd

rich spire Feb 14, 2024, 11:01 PM

#

pero sigue quedando igual si vuelvo para que me muestre esto

#

#

si vuelvo a ponerle esto al map todo queda como antes

#

los iconos no cambiaron nada

sharp current Feb 14, 2024, 11:02 PM

#

Por eso, vamos borrando cositas

#

hasta que encontremos la piedra en el zapato

rich spire Feb 14, 2024, 11:02 PM

#

rich spire

por las dudas, ahí no le estoy pasando iconos

#

le paso links, puro texto

sharp current Feb 14, 2024, 11:02 PM

#

Yo necesito ver como va quedando el código

#

y como se va viendo

rich spire Feb 14, 2024, 11:03 PM

#

#

sharp current Feb 14, 2024, 11:06 PM

#

Vamos a probar borrar el html y solo imprimirémos lo mismo de antes:

<p>{name}</p>

#

A ver si el error se encuentra ahí

#

Porque no veo nada raro

rich spire Feb 14, 2024, 11:06 PM

#

sharp current Intenta iterar solo el nombre: ```js { projects.map(({ name }) => ( <p>{n...

igual que esto?

sharp current Feb 14, 2024, 11:07 PM

#

Me refiero al componente, dejale el frontmatter intacto

#

solo toca el html

rich spire Feb 14, 2024, 11:07 PM

#

rich spire

queda exactamente esto

#

si funciona ahí

#

dá los 3 name

sharp current Feb 14, 2024, 11:08 PM

#

Ok, entonces vuelve como estaba al prinicipio

#

pero ahora vamos borrando de a bloques

#

Uy

#

Quizá el problema sea los img

#

no estás cerrando

#

<img /> 👈

rich spire Feb 14, 2024, 11:10 PM

#

no parece

sharp current Feb 14, 2024, 11:10 PM

#

¿Lo probaste?

#

porque es importante cerrarlos

rich spire Feb 14, 2024, 11:11 PM

#

sip

sharp current Feb 14, 2024, 11:11 PM

#

Muestra

rich spire Feb 14, 2024, 11:11 PM

#

no cambia nada

sharp current Feb 14, 2024, 11:11 PM

#

Copia todo el componente y pegalo aqui

#

para verlo entero

rich spire Feb 14, 2024, 11:11 PM

#

#

rich spire Feb 14, 2024, 11:11 PM

#

sharp current Copia todo el componente y pegalo aqui

ok

#

export interface Props {
name: string;
url: string;
image: string;
github: string;
}

const { name, image, url, github } = Astro.props;

<a class="relative rounded-lg bg-[#454545] w-48 h-64 overflow-hidden" href="#">
<div class="absolute [&>A]:hover:translate-y-0 [&>A]:hover:opacity-100">
<a class="translate-y-6 opacity-0 z-10 absolute top-4 right-4 size-4 transition-all duration-500" href={github}>
<img class="absolute size-4 invert" src="{githubIcon?.src}" alt={name} />
</a>
<a class="translate-y-6 opacity-0 z-10 absolute top-10 right-4 size-4 transition-all duration-500" href={url}>
<img class="absolute size-4 invert" src="{arrowUp?.src}" alt="" />
</a>
<img class="z-1 w-48 h-64 object-cover rounded-lg transition-all duration-500 scale-95 hover:scale-100 grayscale hover:grayscale-0"
src={image} alt="#" />
</div>
</a>

sharp current Feb 14, 2024, 11:12 PM

#

Te recomiendo la extensión, mira que bello:

rich spire Feb 14, 2024, 11:12 PM

#

cual es esa?

sharp current Feb 14, 2024, 11:13 PM

#

rich spire Feb 14, 2024, 11:13 PM

#

se ve bien

sharp current Feb 14, 2024, 11:14 PM

#

Te voy a enviar el código y lo vas a reemplazar con todo el html

rich spire Feb 14, 2024, 11:14 PM

#

ok

sharp current Feb 14, 2024, 11:14 PM

#

---
export interface Props {
  name: string;
  url: string;
  image: string;
  github: string;
}

const { name, image, url, github } = Astro.props;

---

<a class="relative rounded-lg bg-[#454545] w-48 h-64 overflow-hidden" href="#">
    <div class="absolute [&>A]:hover:translate-y-0 [&>A]:hover:opacity-100">
      {name}
    </div>
</a>

#

Vamos poco a poco

rich spire Feb 14, 2024, 11:14 PM

#

sharp current Feb 14, 2024, 11:14 PM

#

perfecto

#

<a class="relative rounded-lg bg-[#454545] w-48 h-64 overflow-hidden" href="#">
    <div class="absolute [&>A]:hover:translate-y-0 [&>A]:hover:opacity-100">
        <a class="translate-y-6 opacity-0 z-10 absolute top-4 right-4 size-4 transition-all duration-500" href={github}>
            <img class="absolute size-4 invert" src="{githubIcon?.src}" alt={name} />
        </a>
    </div>
</a>

#

solo el html

#

el frontmatter dejalo intacto

rich spire Feb 14, 2024, 11:15 PM

#

sharp current Feb 14, 2024, 11:16 PM

#

---
export interface Props {
  name: string;
  url: string;
  image: string;
  github: string;
}

const { name, image, url, github } = Astro.props;

---

<a class="relative rounded-lg bg-[#454545] w-48 h-64 overflow-hidden" href="#">
    <div class="absolute [&>A]:hover:translate-y-0 [&>A]:hover:opacity-100">
        <a class="translate-y-6 opacity-0 z-10 absolute top-4 right-4 size-4 transition-all duration-500" href={github}>
            {name}
            <img class="absolute size-4 invert" src="{githubIcon?.src}" alt={name} />
        </a>
    </div>
</a>

rich spire Feb 14, 2024, 11:16 PM

#

#

eso no se va a ver

#

porque tengo un opacity-0 en el anchor creo

sharp current Feb 14, 2024, 11:17 PM

#

¿Consideras que es un problema de estilos?

rich spire Feb 14, 2024, 11:17 PM

#

puede que sea

#

pero no es raro que funcione uno y el resto no?

sharp current Feb 14, 2024, 11:18 PM

#

---
export interface Props {
  name: string;
  url: string;
  image: string;
  github: string;
}

const { name, image, url, github } = Astro.props;

---

<a class="relative rounded-lg bg-[#454545] w-48 h-64 overflow-hidden" href="#">
    <div class="absolute [&>A]:hover:translate-y-0 [&>A]:hover:opacity-100">
        
        <img class="z-1 w-48 h-64 object-cover rounded-lg transition-all duration-500 scale-95 hover:scale-100 grayscale hover:grayscale-0" src={image} alt="#" />
    </div>
</a>

rich spire Feb 14, 2024, 11:19 PM

#

ahí si funciona

#

pues si era un error de estilos

#

era en lo único que pensaba que no erraría

sharp current Feb 14, 2024, 11:19 PM

#

con los estilos tocaría con las devtools

rich spire Feb 14, 2024, 11:19 PM

#

muchas gracias y perdoná las molestias

rich spire Feb 14, 2024, 11:19 PM

#

sharp current con los estilos tocaría con las devtools

eso intentaba

#

pero se rompía

sharp current Feb 14, 2024, 11:20 PM

#

Si quieres le haces deploy y lo checo

rich spire Feb 14, 2024, 11:20 PM

#

el que funcionaba era un div como lo cree en el código, pero en las devtools el resto eran anchor

#

entonces no podía modificarlos

sharp current Feb 14, 2024, 11:20 PM

#

Le haces un run build y subes la carpeta dist: https://app.netlify.com/drop/ 👈

rich spire Feb 14, 2024, 11:21 PM

#

no gracias, yo ya lo modifico y le hago lo que buscaba

sharp current Feb 14, 2024, 11:21 PM

#

Dale 👌

rich spire Feb 14, 2024, 11:21 PM

#

ty

#

y perdón de nuevo

#Alguien que me pueda ayudar para iterar