I am new to react and this is my first site and I have some plan JavaScript I found online that will allow a word to be typed out and updated over a course of time. I have already made it into a react Component. But I am not sure how to covert this JavaScript Function into react code.

Here is my new React Component.

```
import React, {Component} from 'react';

class Hero extends Component {
    render () {
        return (
           <div>
            <section id="hero" className="d-flex flex-column justify-content-center align-items-center">
                <div className="hero-container" data-aos="fade-in">
                    <h1>Augusto J. Rodriguez</h1>
                    <p>I'm a <span className="typed" data-typed-items="opption1, opption2, opption3, opption4"></span></p>
                </div>
            </section>
           </div>  
        );
    }
}

export default Hero;

```

Here is the vanilla JavaScript that I want to use in my code. Currently this is living in my main.js file that is being called from the index.html. this is the only part of the code that is not working.

```
  if ($('.typed').length) {
    var typed_strings = $('.typed').data('typed-items');
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 2000
    });
  }

```

I am assuming I need to create a function where my  tag is. But I am not sure how to do that in React.

any article references would be awesome or tips on how to resolve this. I have the full code for this project on [GitHub](https://github.com/gustheitguru/augustojrodriguez.xyz).