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>
))}