Mapping multiple arrays in JSX

I’m trying to display some html elements in a certain way when mapping over the arrays in JSX. I want it to be like:

Title
Link

Title
Link

But when I try, I always end up with it displayed like this:

Title
Title

Link
Link

This is how the array is structured.

enter image description here

In my code this is how I’m mapping over the arrays.

{audioInfo.map((item, index) => {
                   
   return ( <div key={index}>

                        
     <div>{item.filename[0].name}</div>
                            
         {

          item.url.map((u,i)=>(
              <div key={i}>
                                
                 <audio controls src={u}> </audio>
              </div>
           ))
         }
  </div> )
 })}

This is the part I’m having trouble with.

item.filename[0].name

This only gets the first filename but I’m not sure how I would be able to iterate to the next filename while still rendering the html like I want. It should be in pairs with the filename and url in each map iteration. I hope that makes sense.

Full Code:

import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import  firebaseConfig from "../dropzone/config";

import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    useRouteMatch,
    BrowserRouter,
    useParams
  } from "react-router-dom";
import { isElement } from 'react-dom/test-utils';


if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);

}else {
    firebase.app(); // if already initialized, use that one
}

  // router is getting the current path name


const FolderPage = () => {

    let {folder} = useParams();

    let fb_storage = firebase.storage();
    let storageRef = fb_storage.ref();  
    
    let rootRef = storageRef.child(folder);


    const [files, setFiles] = useState([]); 
   
    const [audioInfo, setAudioInfo] = useState([]);    

        
    const fileNames =  () =>{
        let temp = [];
        rootRef.listAll().then( function(res) {
            
            let promises = res.items.map(item => item.getDownloadURL());

            Promise.all(promises).then((downloadURLs)=>{
                        
                  
                    setAudioInfo([
                        {
                            filename:res.items, 
                            url: downloadURLs 
                        }  
                    ])
                })
          
            }).catch(function(error) {
           
        });
            
    
    }

    useEffect(()=>{
        fileNames();
    },[])


    console.log(audioInfo)
    

    return (
        <>
            <div>hello {folder}</div>
          

            <div>

                
                {audioInfo.map((item, index) => {
                   
                   return ( <div key={index}>

       
                           <div>{item.filename[0].name}</div>
                            
                            {

                            item.url.map((u,i)=>(
                               <div key={i}>
                                <span>{u.name}</span>   
                                <audio controls src={u}> </audio>
                               </div>
                            ))
                            }

                           
                    </div> )
                    })}
                
            </div>

        </>
    )
}

export default FolderPage

Answer

To solve this you can create a variable before setting audioInfo state.

const files = []
res.items.map((item, i)=>{
  files.push({url: downloadURLs[i], file: item.name })     
})
setAudioInfo(files)

Now you can simply iterate and render

<div>                
     {audioInfo.map((item, index) => {                   
       return ( <div key={index}>                           
        <span>{item.file}</span>   
        <audio controls src={item.url}> </audio>                                                        
        </div> )
       })}                
</div>