I'm trying to return a simple JSX component based on Firebase data but it doesn't seem to work. I tried returning only the component and that works perfectly. However, if I try to map it, it doesn't work. The server is returning data for sure as I could log it into the console. I tried to set up the code in Codesandbox but that isn't being setup properly. Any help is much appreciated.

This is my Github link: https://github.com/servesh-chaturvedi/Chat-App-with-firebase

The current code in CodeSandBox: https://codesandbox.io/s/small-morning-clnrp?file=/components/Sidebar.js

{chatSnapshot?.docs.map((chat) => {
  <Chat key={chat.id} id={chat.id} users={chat.data().users} />
 })}

CodePudding user response：

When you use an arrow function, the default behavior is to return whatever is to the immediate right of the arrow, such that:

const returnsHello = () => 'Hello'
returnsHello() //'Hello'

But when you want to use the arrow function with a block of code like you're doing with the curly braces, the implied return is dropped and must be made explicit. Here's an edit of your code that should work, assuming you don't have other issues.

{chatSnapshot?.docs.map((chat) => {
 return <Chat key={chat.id} id={chat.id} users={chat.data().users} />
 })}

This will iterate through each element of your array, and return a new array with Chat components using the array values.