Issues showing Firebase array object in react JS

Question

I've been trying to work out whats going in the below code all day and after searching through stack over flow and you-tube, I still cant figure out whats wrong with my code.

Essentially I have a user document stored on firebase firestore. Inside the document I have an array of 'friends'.

[Heres what my firebase backend looks like .

I'm pulling the whole document into my React JS project and saving it onto a global state called friendsList.

Inside my profile page component.The console logs the user attribute of each user in the friend array (so its definitely getting the data), console log output

Now inside the return section on my profile page component, I go to pass in the friend as an object and display the FriendItemUI component, however nothing displays and no error occurs. I even tried to just display a paragraph <p and log just the user ID of the currently selected array item, but nothing showed in the console log, no errors, and nothing displayed on the component itself.

Now if i place the

console.log(friend.friend.user) 

inside the return statement, it will log the users ID to the console without any issues.

So it seems to be that i can log the information to the console, inside and outside the return function, but i cant pass the actual array object into another component and i cant actually visiually show any information from the array in a div?

I'm not sure what im doing wrong and any help is appreciated.

Profile Page Component:

render(){

    const { friendsList } = this.props;
   
    return (
        <div>
            <a class="waves-effect waves-light btn" onClick={() => this.sendFriendRequest()}>Add 
            Friend</a>
            { friendsList && friendsList.map(friendsList => {
                 
                { friendsList.friends.map(friend => {
                    
                    //friendsList is a firebase firestore document. 
                    // friendsList.friends is the array 'friends' inside the document
                    (async() => {
                        console.log("waiting for variable");
                        while(typeof friend.friend.user == "undefined") 
                            await new Promise(resolve => setTimeout(resolve, 1000));
                            (console.log("variable is defined:   " + friend.friend.user))
                        return(
                            
                            <div>
                                <p>{friend.friend.user}</p>
                                <FriendItemUI friend={friend}/>
                                 
                            </div>
                        )
                    })();
                })} 
            })}                     
        </div>
    )          
}

FriendItemUI.JS component

class FriendItemUI extends Component {


render() {

    const { friend } = this.props;
    // this log doesnt even display anything to the console
    console.log(friend + 'test')

    if(friend) {
          return <p> testing {friend.friend.user} | {friend.friend.personalMessage} | {friend.friend.friendStatus} </p>
        }             
     else {
        return(
            <div>
                <p>error loading friendlist</p>
            </div>
        )
    }
    }}
      export default FriendItemUI

Now heres where it gets even more weird, If i dont want to go through all the friends in the array object and just want to display one friend, I can with the following code. [this code will now pass the friends array object into the FriendItemUI component and successfully display the name, personalMessage and friendStatus which is all taken from the firestore document array object..

    const { friendsList } = this.props;
 { friendsList && friendsList.map(friendsList => {
               
     return (
         <FriendItemUI friend={friendsList.friends[1]}/>
     )

I'm just really confused, I dont want to hard code which index values of the array i want to show, I'm trying to make the component check to see how many objects in the array there is, loop through the array and pass each of the friends from the array into the FriendItemUI component.

Answer 1

I'm super silly!, turns out that console.log and manually rendering a state was fine because react JS was smart enough to only render once the state values were defined with my firebase data.

All i had to do was modify the code as per below and add a check to only loop through the array if the array state value is != null. If the array state value is == null then return a loading results text message.

everything now works. Posting this answer incase someone runs into a similar issue.

render(){
        console.log(this.props); // debug log
        const { friendsList, profile } = this.props;

        
        console.log('test log' + profile);
        if(profile.friends!=null){
            return(
                <div className="container">
                    <a class="waves-effect waves-light btn"  onClick={() => this.sendFriendRequest()}>Submit Friend Request</a>
                    { profile && profile.friends.map(profile => { //if valid survey, return
                        return (
                            <div> 
                                <FriendItemUI friend={profile}/>
                             </div>
                        )
                    })} 
                </div>
            )
        } else{
            return (
                <div>
                    <p style={{textAlign: 'center'}}>Loading Results</p>
                </div>
            )
        }
    }