React.js, map is not rendering components

Question

I have this as top component:

  const [allThreads, setAllThreads] = useState([{ post: "b" }]);
  
  return (
    <div className="App">
     
      <Main allThreads={allThreads} key={3} />
      
    </div>
  );
}
export default App;

This is my Main component:

import "../scss/App.scss";
import Thread from "./Thread";

function Main(props) {
  console.log("props received in Main" + JSON.stringify(props));
  return (
    <div className="main">
      <span>main</span>
      {props.allThreads.map((thread) => {
        console.log("appending posts in list");
        console.log(thread.post);
        <Thread post={thread.post} />;
      })}
    </div>
  );
}

export default Main;

And this is Thread component:

import "../scss/App.scss";
function Thread(props) {
  console.log("reached thread method");
  return <div className="thread">{props.post}</div>;
}
export default Thread;

But iteration is never reaching Thread component. And this [{ post: "b" }] that i used as initial state is not getting printed on screen. What could be the issue? That is currently the output coming:

Answer 1

It is because you are not returning anything in your map. It is a common mistake. map should return a new element for each iteration, like so:

import "../scss/App.scss";
import Thread from "./Thread";

function Main(props) {
  console.log("props received in Main" + JSON.stringify(props));
  return (
    <div className="main">
      <span>main</span>
      {props.allThreads.map((thread) => {
        return <Thread post={thread.post} />;
      })}
    </div>
  );
}

export default Main;