0

Tengo el siguiente código:

<aside className={`${styles.contenido_curso}`}>
            <h3>Contenido del curso</h3>
            <div className="wrapper">
              <div className="accordion">
                {modulos.map((item, i) => (
                  <div className="item" key={i}>
                    <div className="title" onClick={() => toggle(i)}>
                      <span className="arrow">
                        {selected === i ? "-" : "+"}
                      </span>
                      <h3>
                        Módulo {item.id_modulo}: {item.titulo_modulo}
                      </h3>
                    </div>
                    <div
                      className={selected === i ? "content show" : "content"}
                    >
                      {item.videos.map((video, j) => (
                        <p
                          onClick={() => pasarVideo(item.videos[j])}
                          id={video.url_video}
                          key={j}
                          disabled
                        >
                          {video.titulo_video}
                        </p>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </aside>

En donde mapea por un lado, los módulos y por otro, los videos de los módulos. Yo quisiera agregar una condición en esta parte:

{item.videos.map((video, j) => (
     <p
     onClick={() => pasarVideo(item.videos[j])}
     id={video.url_video}
     key={j}
     >
     {video.titulo_video}
     </p>
))}

En donde diga que si item.videos.videoDesbloqueado == true me muestre esto:

{item.videos.map((video, j) => (
         <p
         onClick={() => pasarVideo(item.videos[j])}
         id={video.url_video}
         key={j}
         >
         {video.titulo_video}
         </p>
))}

PD: el array de videos tiene una propiedad videoDesbloqueado.

Y sino que me muestre botones con el atributo disabled, ya que los videos estarían bloqueados, ¿cómo podría agregar esta condición? No logro sacarlo ya que tengo un .map en medio y se me complica (soy nuevo en React). Muchas gracias!

{item.videos.map((video, j) => (
         <button
         disabled
         onClick={() => pasarVideo(item.videos[j])}
         id={video.url_video}
         key={j}
         >
         {video.titulo_video}
         </nutton>
))}

1 respuesta 1

1

puedes usar un operador condicional (ternario) dentro del .map() para mostrar el elemento según corresponda.

El operador condicional (ternario) es el único operador en JavaScript que tiene tres operandos. Este operador se usa con frecuencia como atajo para la instrucción if.

condición ? expr1 : expr2

En tu caso tu código quedaría algo así:

{item.videos.map((video, j) => (
  video.videoDesbloqueado ? (
    <p
      onClick={() => pasarVideo(item.videos[j])}
      id={video.url_video}
      key={j}
    >
      {video.titulo_video}
    </p>
  ) : (
    <button
      disabled
      onClick={() => pasarVideo(item.videos[j])}
      id={video.url_video}
      key={j}
    >
      {video.titulo_video}
    </button>
  )
))}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.