Why this component is not rendering in react js.It shows the error message Unhandled Runtime Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This is my component
function Test({session}) {
const RenderPage=fetchComment &&(
fetchComment?.map((comment)=>{
return <LoadComment
key={i}
timestamp={comment.timestamp?.toDate()}
comment={comment.comment}
image={comment.image}
user={comment.user} />
})
)
return (
<RenderPage></RenderPage>
)
}
return (
{RenderPage}
)
change the return statement. since its a variable not a component.
RenderPage isn't a valid React component, it is either falsey if fetchComment is undefined/falsey, or it is an array of JSX. Just return the computed RenderPage value. I suggest also un-PascalCasing the variable to alleviate any future reading confusion, convert back to camelCase. And to cover the case where you aren't returning an array, conditionally return null for valid JSX return from Test component.
function Test({session}) {
const renderPage = fetchComment ? fetchComment.map((comment, i) => {
return (
<LoadComment
key={i}
timestamp={comment.timestamp?.toDate()}
comment={comment.comment}
image={comment.image}
user={comment.user}
/>
);
}) : null;
return renderPage;
}
Use
export default Test({session}) {
const RenderPage=fetchComment &&(
fetchComment?.map((comment)=>{
return <LoadComment
key={i}
timestamp={comment.timestamp?.toDate()}
comment={comment.comment}
image={comment.image}
user={comment.user} />
})
)
return (
{RenderPage}
)
}