Rendering Child Component after Parent in React-CodePudding

I am rendering a child component of a parent component. The text inside the render method of the child component is being rendered, but the map function is not being called on the JSON array I have in the child component. I used console.log and the array has the right values in it. Here is the render function of the child component:

  console.log("rerender: "   JSON.stringify(this.state.myDropdownMessages)); 
                   this.state.myDropdownMessages && console.log("DID THIS!");  
                             
    //}
  return (

        <>
        TESTING 1234---does render
        {this.state.myDropdownMessages && this.state.myDropdownMessages.map((oneMessage) =>
                                    {
                                            {/*let blueDotDisplay = false;
                                                if (oneMessage.hasBeenViewed = "false"){
                                                    blueDotDisplay = true;
                                                }*/
                                            }
                                            <>
                                            Inside map function--doesn't render
                                            <img src={oneMessage.posterprofilesrc} className='OneHeaderMessageProfilePic' />
                                            <div className="OneHeaderMessageRightDiv">
                                                test again
                                                <div className="OneHeaderMessageInfo">
                                                <div className="OneHeaderMessageNameDiv">
                                                    {oneMessage.postername}
                                                </div>
                                                
                                                </div>
                                                <div className="OneHeaderMessageTimeDiv">
                                                {oneMessage.time}
                                                
                                                </div>
                                            </div>
                                    
                                            <div display = {(oneMessage.hasBeenViewed == 'false') ? 'block' : 'none'} className="OneHeaderMessageBlueDot" id={'OneHeaderMessageBlueDot'   oneMessage.id}>';
                                            </div>
                                    
                                            </>
                                    
                                        }
                                    

                                    )}

The child component is rendered on the click of a button from the parent component. It renders the code before the map--"TESTING 1234"--but doesn't render the code inside the map function even though the map function is loaded. It even prints out on the console right before the render function is supposed to return that the array is fully loaded with the right values. Is the problem that the parent component doesn't rerender the child component once the data is loaded in the child component? I tried calling the parent render function from the child but it didn't work. Neither did calling child component's render function. Thank you very much for your help.

CodePudding user response：

Just add return to your map function or just remove curly brackets ...myDropdownMessages.map((oneMessage) => <> //..some code.. </>

...myDropdownMessages.map((oneMessage) => { return (<> //..some code.. </>)}

CodePudding user response：

Make sure to return from the mapping loop, you are looping but never returning hence no react node are being rendered.

myArray.map(item => {
return (<div> Hello World </div>)
})