Trying to use Typed.js in react-CodePudding

I am trying to use Typed.js on my website, and I have been getting many errors I cant find a way to fix them.

I have looked through GitHub, and I have found the exact same problem that someone had I used that code in my document and the errors are still popping up. The errors are always Expression Expected and } expected also, Unexpected token. Did you mean {'}? Here is a picture of the errors too. Here is the errors that are resulting: errors

import "./App.css";
import Typed from "typed.js";
import { useEffect, useRef } from "react";

function HomePage() {
  return (
    <>
      <body>
        <div >
          <nav>
            <h2 >JAKEISTHATMAN.</h2>
            <ul>
              <li>
                <a href="#">Home</a>
              </li>
              <li>
                <a href="#">About</a>
              </li>
              <li>
                <a href="#">Services</a>
              </li>
              <li>
                <a href="./contact.js">Portfolio</a>
              </li>
            </ul>
            <button type="button">Contact</button>
          </nav>
        </div>
        <div ></div>

        <div >
          <h1>
            I'm a <span ></span>
          </h1>
          <p>
            Also I work for <b>@no</b> media team!
          </p>
          <button type="button">Contact</button>
        </div>

        export default function Typed() {
    const TypedElement = useRef(null);

    useEffect(() => {
        if (!TypedElement.current) return;

        const typed = new Typed(TypedElement.current, {
            strings: [
                "string",
                "string2",
                "string3",
            ],
            startDelay: 300,
            typeSpeed: 100,
            backSpeed: 100,
            backDelay: 500,
            loop: true,
        });

        // Destroying
        return () => {
            typed.destroy();
        };
    }, []);
  
   return <span ref={TypedElement}></span>
}

      </body>
    </>
  );
}

export default HomePage;

CodePudding user response：

First, if the code example above is how your code really is, it won't work because you just have javascript in an html tag all of a sudden. Try wrapping the javascript with curly brackets to let the file know you are typing javascript code now like this:

<div>
  {console.log("this is javascript")}
</div>

Second, it looks like you are trying to define a functional component called Typed. At the very least, it is poor organization to define a functional component inside an html tag like you have done above (if it isn't impossible, not sure, never tried it). You should define the functional component called Typed outside the HomePage function, like so:

import "./App.css";
import Typed from "typed.js";
import { useEffect, useRef } from "react";

const Example = ({args_if_necessary}) => {
  const typeTarget = useRef(null);

  useEffect(() => {
    const typed = new Typed(typeTarget.current, {
      strings: ["<i>First</i> sentence.", `use ${args_if_necessary}`],
      typeSpeed: 40,
    });

    return () => {
      typed.destroy();
    };
  }, []);

  return <span ref={typeTarget} />;
};

function HomePage() {
    
  return (
    <>
      <body>
        <your-other-html />

        <Example args_if_necessary={"something"} />

      </body>
    </>
  );
}

export default HomePage;