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

Daniel Paul · Accepted Answer · 2021-12-03 06:51:09Z

2

return (
{RenderPage}
)

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

answered Dec 3, 2021 at 6:51

Daniel Paul

5141 gold badge6 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drew Reese · Accepted Answer · 2021-12-03 06:58:16Z

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

edited Dec 3, 2021 at 6:58

answered Dec 3, 2021 at 6:52

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Comments

MagnusEffect · Accepted Answer · 2021-12-03 06:54:21Z

1

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

}

answered Dec 3, 2021 at 6:54

MagnusEffect

3,9954 gold badges28 silver badges63 bronze badges

1 Comment

Jeevan Over a year ago

Thanks it all works.In morning I had tried the same process but not worked.I think I had forgot to save.

Collectives™ on Stack Overflow

Component is not rendering in react js

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related