New to ReactJS, getting an ERROR in [eslint] Parsing error: Unexpected token in JSX, trying to implement react-simple-typewriter

Question

Creating a portfolio website as an exercise and trying out different animations.

Been going through this document, https://www.npmjs.com/package/react-simple-typewriter and searched online as well to get a feel for what to use.

So far, I've tried it as a component prop, it worked, but the loop would not continue after the first animation.

Found a tip online to use as a hook instead, could not get it to even show, as well as throw the above mentioned error.

 import React from 'react' import { useTypewriter } from 'react-simple-typewriter'; export default function Intro() { const MyComponent = () => { const {text} = useTypewriter({ words: ['Hello', 'From', 'Typewriter', 'Hook,']: loop. {3} }) return ( <div className="intro" id="intro"> <div className="left"> <div className="imgContainer"> <img src="assets/stoned1,png" alt=""/> </div> </div> <div className="right"> <div className="wrapper"> <h2>Hello. I'm</h2> <h1>STONEd_NFT</h1> <h3>Freelance </h3> </div> <a href="#portfolio"> <img src="assets/down png" alt=""/> </a> </div> </div> ) } }

When loaded on localhost:3000, this is what shows.

Answer 1

2 Things to fix:

• loop: {3} is invalid syntax, should be only loop: 3 (You can actually open a bug on this package because they tell to do it incorrectly in the documentation)

• then you need to pass text prop to your component

---

import React from "react";
import { useTypewriter } from "react-simple-typewriter";

export default function App() {
  const { text } = useTypewriter({
    words: ["Hello", " I'm STONEd_NFT", "Freelance"],
    loop: 3
  });

  return (
    <div className="intro" id="intro">
      <div className="left">
        <div className="imgContainer">
          <img src="assets/stoned1.png" alt="" />
        </div>
      </div>

      <div className="right">
        <div className="wrapper">
          <h1>{text}</h1>
        </div>
        <a href="#portfolio">
          <img src="assets/down.png" alt="" />
        </a>
      </div>
    </div>
  );
}

Answer 2

try doing value: [3] or {value: 3} the json object is not val