Estoy tratando de seleccionar el primer directorio de ruta de la API que incluye una imagen para poder establecer el valor en la fuente de la imagen y mostrar la primera imagen, pero cuando uso fl[0] obtengo todos los valores
aquí está el código:
{useLesson && useLesson.files.map((fl, index) => { if (fl.mimetype.includes("image")) { // this always get all values not only the first value console.log(fl[0]) // and this always gives me infinite loop issue setSelectedImage(fl[0]) return ( <div key={index}> <img src={axiosUse + fl.path} alt="" /> </div> ) } }) }¿Cómo puedo obtener solo el primer valor de un mapa que incluye algo dentro de él?
lo que estoy tratando de hacer es obtener archivos del servidor y, si es un archivo de imagen, mostrar algún componente, pero ¿cómo puedo obtener solo el primer archivo de valor de imagen?
Podría crear un nuevo componente para mostrar el primer archivo
const FilePreview = ({ mimetype, files, basepath }) => { const firstFileOfType = files.find((file) => file.mimetype.includes(mimetype) ); if (!firstFileOfType) return null; return ( <div> <img src={basepath + firstFileOfType.path} alt="" /> </div> ); };y usarlo como
{useLesson && ( <FilePreview mimetype="image" files={useLesson.files} basepath={axiosUse} /> )}