ReferenceError: Actor is not defined when using React + Internet Identity

[theoman42]

Hi, I was playing with the vanilla JS II template and tried to migrate to the logic to a React app, but I getting an error at the actor portion. Everything else is working. The code is below, I was hardcoding the canister-ids for testing purposes.

import { useState } from 'react';
import {fa_backend, createActor} from 'declarations/fa_backend';
import {AuthClient} from "@dfinity/auth-client"
import {HttpAgent} from "@dfinity/agent";
// const path = require("path");

function App() {
  const [greeting, setGreeting] = useState('');
    
  const handleSubmit = async (e) => {
    e.preventDefault();
    try{
      const greeting = await fa_backend.greet();
      setGreeting(greeting);

    } catch {
      console.error('Error fetching greeting:', error);
    }
  }

  const handleLogin = async (e) => {
    e.preventDefault();

    // console.log(process.env.FA_BACKEND_CANISTER_ID)
    // identityProvider: "http://be2us-64aaa-aaaaa-qaabq-cai.localhost:4943/",
    // identityProvider: "http://rdmx6-jaaaa-aaaaa-aaadq-cai.icp0.io",

      let authClient = await AuthClient.create();
      await new Promise((resolve) => {
        authClient.login({
          identityProvider: "http://asrmz-lmaaa-aaaaa-qaaeq-cai.localhost:4943/",
          onSuccess: resolve,
        });
      });
      const identity = authClient.getIdentity();
      const agent = new HttpAgent({ identity });

      actor = createActor("by6od-j4aaa-aaaaa-qaadq-cai", {
        agent,
      });

  } 

  return (
    <main>
      <img src="/logo2.svg" alt="DFINITY logo" />
      <br />
      <br />
      <form action="#" onSubmit={handleSubmit}>
        <label htmlFor="name">Enter your name: &nbsp;</label>
        <input id="name" alt="Name" type="text" />
        <button type="submit">Click Me!</button>
      </form>
      <form action="#" onSubmit={handleLogin}>
        <button type="submit">Login</button>
      </form>
      <section id="greeting">{greeting}</section>
    </main>
  );
}

export default App;

This error is after I successfully created my II.

[jennifertran]

The actor variable is not defined.

Can you please create an actor variable that passes the initialized actor as a variable?

For example, you should have something similar in this file that you shared:

import {fa_backend, createActor} from 'declarations/fa_backend';

let actor = fa_backend;