Component is not rendering in react js

Question

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>
)
}

Answer 1

return (
{RenderPage}
)

change the return statement. since its a variable not a component.

Answer 2

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;
}

Answer 3

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}
 )

}