React nested iterators not returning value

November 12, 2021

I am trying to run two map functions nested within each other, and return an element inside each function. I am having trouble understanding where to put the return(s). I have tried a combination of numerous things. When I am just returning elements from the inner iterator, i have no problem. It’s when I add an element to the external iterator that it breaks down

{  chatList.data[0][0].map((message, messageIndex) => (

   return<IonItem key={messageIndex}>{message}</IonItem>
     return chatList.data[0][1].map((participant, participantIndex) => {
        return <IonItem key={participantIndex}>
          
            <IonLabel>
                <h2>{participant.identity}</h2>
            </IonLabel>
        </IonItem>
        })
     ))
 }

>Solution :

Since you can only return once from the map function (everything after that will be unreachable), you need to return a single element. This means wrapping multiple elements in a container, such as a <div/>. So it will look something like this:

{chatList.data[0][0].map((message, messageIndex) => (   
  <div>
    <IonItem key={messageIndex}>{message}</IonItem>
    {chatList.data[0][1].map((participant, participantIndex) => (
      <IonItem key={participantIndex}>          
        <IonLabel>
          <h2>{participant.identity}</h2>
        </IonLabel>
      </IonItem>)
    )}
  </div>)
)}