Why this ponent 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 ponents) or a class/function (for posite ponents) but got: object. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

This is my ponent

function Test({session}) {
    const RenderPage=fetchComment &&(
                fetchComment?.map((ment)=>{
                    return <LoadComment
                    key={i}
                    timestamp={ment.timestamp?.toDate()}
                    ment={mentment}
                    image={ment.image}
                    user={ment.user} />
                })
                )
return (
<RenderPage></RenderPage>
)
}

Why this ponent 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 ponents) or a class/function (for posite ponents) but got: object. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

This is my ponent

function Test({session}) {
    const RenderPage=fetchComment &&(
                fetchComment?.map((ment)=>{
                    return <LoadComment
                    key={i}
                    timestamp={ment.timestamp?.toDate()}
                    ment={ment.ment}
                    image={ment.image}
                    user={ment.user} />
                })
                )
return (
<RenderPage></RenderPage>
)
}

• javascript
• reactjs

3 Answers 3

return (
{RenderPage}
)

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

RenderPage isn't a valid React ponent, it is either falsey if fetchComment is undefined/falsey, or it is an array of JSX. Just return the puted 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 ponent.

function Test({session}) {
  const renderPage = fetchComment ? fetchComment.map((ment, i) => {
    return (
      <LoadComment
        key={i}
        timestamp={ment.timestamp?.toDate()}
        ment={ment.ment}
        image={ment.image}
        user={ment.user}
      />
    );
  }) : null;
  return renderPage;
}

Use

export default Test({session}) {
const RenderPage=fetchComment &&(
            fetchComment?.map((ment)=>{
                return <LoadComment
                key={i}
                timestamp={ment.timestamp?.toDate()}
                ment={ment.ment}
                image={ment.image}
                user={ment.user} />
            })
            )
return (
   {RenderPage}
 )

}