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:
Advertisement
Answer
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;