Problem using Render instead of Component in React

Question

I get this error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

When clicking this link:

<li><NavLink activeClassName="active" to={{pathname: '/add-new'}}>Add new Recipe</NavLink>{' '} </li>

My route looks like this:

<PrivateRoute 
  exact 
  path='/add-new' 
  render={(props) => 
    <NewRecipe 
      {...props} 
      addRecipe={this.addRecipe}/>
  } 
  authenticated={authenticated} 
/>

PrivateRoute.js looks like this:

import React from "react";
import { Route, Redirect } from "react-router-dom";

export default function PrivateRoute({
  component: Component,
  authenticated,
  ...rest
}) {
  console.log(...rest);
  return (
    <Route
      {...rest}
      render={props =>
        authenticated === true ? (
          <Component {...props} {...rest} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
}

Error occurs since I switched from Component={NewRecipe} to Render={...} since I need to pass a function.

dance2die · Accepted Answer · 2018-10-15 18:49:49Z

1

PrivateRoute skips render props (instead of call it), fix might be something like this (notice render() logic):

export default function PrivateRoute({
  component: Component,
  authenticated,
  render,
  ...rest
}) {
return (
    <Route
      {...rest}
      render={props =>
        authenticated === true ? (
          render ? render(props) : <Component {...props} {...rest} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );

It's overcomplex a bit, but I hope can help you understand the idea on how render prop might be caught.

Other solution is to change /add-new to be passed as a component:

  <PrivateRoute 
    exact 
    path='/add-new' 
    addRecipe={this.addRecipe}
    component={NewRecipe}
    authenticated={authenticated} 
  />

edited Oct 15, 2018 at 18:49

dance2die

37.2k39 gold badges137 silver badges200 bronze badges

answered Oct 15, 2018 at 18:11

Sasha

5,9441 gold badge22 silver badges38 bronze badges

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

4 Comments

indiehjaerta Over a year ago

I used to pass it as a component but since I use Link to call PrivateRoute I need to pass the function in Render={}

Sasha Over a year ago

@indiehjaerta yeah, np, try to update PrivateRoute as I suggested

indiehjaerta Over a year ago

It get's rid of the error but I think somehow it ain't passing the render correctly cause when it calls addRecipe that is in my App.js this.state is undfined which it is not.

Sasha Over a year ago

@indiehjaerta maybe you've missed to bind the addRecipe to correct context?

Collectives™ on Stack Overflow

Problem using Render instead of Component in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related