CODEWITHSUNDEEP
javascriptreactjsreact-router
user10152831
user10152831

Reputation:

how to pass props to lazy loading components?

I'm trying to make website authentication. I tried to pass props to lazy loading modules but suddenly i encountered error "Uncaught (in promise) TypeError: w is not a function"

I'm using react with apollo client, react router and graphql query is perfectly working and lazy component's rendering too but i can't pass props to lazy loading component

// App.js
const SignIn = lazy(() => import('pages/signin'));

function App(props) {
  // state to represent user signed in to the site
  let [auth, setAuth] = useState(false);

  function handleAuth (boolean) {
    setAuth(boolean);
  }

  return (
    <>
      <main>
        <Suspense fallback={<div>Loading...</div>}>
          <Switch>
            <Route exact path="/" component={HomePage} />
            <Route 
              path="/signin"
              auth={auth}
              handleAuth={handleAuth}
              render={props => (<SignIn {...props} /> )}
            />

// signin.js
let auth = props.auth;
let handleAuth = props.handleAuth;

return (
    <ApolloConsumer>
      {client => {
        return (
          <>
            <div className="signin-div">
              <h1>Sign in</h1>

              <form
                onSubmit={async e => {
                  e.preventDefault();
                  const { data } = await client.query({
                    query: SIGNIN_ACCOUNT,
                    variables: { email, password }
                  });
                  if (data.signin) {
                    handleAuth(true);
                  }
                }}
                className="signin-form"
              >

I expected that handleAuth(true) will perfectly work but I took error that handleAuth(true) is not a function. below is the error message "Uncaught (in promise) TypeError: w is not a function"

How should I pass props to lazy loading modules?

Upvotes: 11

Views: 19433

Answers (1)

Sujit.Warrier
Sujit.Warrier

Reputation: 2889

No rocket science here just pass it props directly to signin component, the reason you are sending the props separately is because those props are those recieved from then route. 

 return (
        <>
          <main>
            <Suspense fallback={<div>Loading...</div>}>
              <Switch>
                <Route exact path="/" component={HomePage} />
                <Route 
                  path="/signin"
                  auth={auth}

                  render={props => (<SignIn handleAuth={handleAuth} {...props} /> )}
                />

Upvotes: 6

Related Questions