Question 74264 in Reactjs Question posted in
The new location for the React Documentation can be found here.

React: This may happen if you return a Component instead of <Component /> from render – Reactjs

I Am Getting This Error Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it

And

Matched leaf route at location "/" does not have an element. This means it will render an with a null value by default resulting in an "empty" page.

Below picture is the index.ts code in the change-accouont folder in the pages folder. I want to open different pages here based on the parameters in the URL:
enter image description here

But when i enter the url, will show the below error.

Below is the DeleteAccountPage code:
enter image description here

Below picture is the createDeleteAccountPage code:
enter image description here

How to fix this error in react?

Tags:

2

Answers


  1. 0

    if DeleteAccountPage and ChangeAccountPage are Component you need change your code to :

    export default ()=>{
    if(retrieverUrlParamValue(changeTypeQueryParamNode)){
        return <DeleteAccountPage />;
    }else{
        return <ChangeAccountPage />;
    }
}

    for return a component like DeleteAccountPage

    return <DeleteAccountPage />
    Login or Signup to reply.
  2. 0

    You are not returning anything in your code blocks. You can do something like:

    export default ()=>{
    if(retrieverUrlParamValue(changeTypeQueryParamNode)){
        return DeleteAccountPage;
    }else{
        return ChangeAccountPage;
    }
}

    However you need to be careful how you use this code. Based on what you shared you’d need something like:

    import AccountPage from 'the above file';

// Then in your render function
const conditionalComponent = AccountPage();
const FinalComponent = conditionalComponent(React.Fragment);
return <FinalComponent />;

    This is arguably bad practice. Instead you should use component composition:

    const DeleteAccountPage : FC<{ PageProvider: FC }> = ({ PageProvider }) => {
   return ( 
      <PageProvider>...</PageProvider>
   );
}

// ...

export default (props: { PageProvider: FC })=>{
    if(retrieverUrlParamValue(changeTypeQueryParamNode)){
        return <DeleteAccountPage {...props} />;
    }else{
        return <ChangeAccountPage {...props} />;
    }
}

    This way to use this component you just need:

    import AccountPage from 'the above index.ts file';

// ...
return <AccountPage PageProvider={React.Fragment} />
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search