JS not running on Gatsby

Question

I'm trying Gatsby for the first time to build a blog. I'm using the Gatsby Starter Blog as a base.

I want to add some javascript to animate some text, and just as a quick test I've added the below to my html.js file:

<script
      dangerouslySetInnerHTML={{
        __html: `
                var name = 'world';
                console.log('Hello ' + name);

                console.log('hey');

                const phrases = [
                    'aaa',
                    'bbb',
                    'ccc'
                ];

                const el = document.getElementById('bio__subtext');

                el.innerHTML = 'hi';

            `,
      }}
    />

However this is throwing the following error in my console: (index):15 Uncaught TypeError: Cannot read property 'innerHTML' of null

The ID is correct, and exists in my Bio.js file:

class Bio extends React.Component {
  render() {
    return (
      <div id="bio">
        <div className="bio_wrapper">
            <img
              src={profilePic}
              alt={'NdW'}
            />
            <p>
              Hi, I'm Natalie!<br />
              I <span id="bio__subtext"></span><br/>
              <span className="about_button"><a href="/">Find out more</a></span>
              <a href="#" target="_blank">GH</a>
              <a href="#" target="_blank">TW</a>
            </p>
        </div>
      </div>
    )
  }
}

I assume this is because the JS is trying to run before Bio.js has finished.. but how do I tell the JS to "wait"? If I try including the JS in the Bio.js file, it fails to compile.

Adding document.addEventListener("DOMContentLoaded", function(event) { doesn't help either.

just a hint const el should be let el or var el. modifying constant is not correct — Amir-Mousavi
– Amir-Mousavi, Commented Dec 20, 2018 at 16:32
@ksav At the moment, I'm just trying to replace the text within #bio__subtext. Eventually I'll be looping through an array of phrases and animating between the stages. — Natalie
– Natalie, Commented Dec 20, 2018 at 16:46
@ksav How? Everything I try seems to cause a compile error... — Natalie
– Natalie, Commented Dec 20, 2018 at 16:49
I meant to say: in Bio you can add some javascript before the render() function's return statement :) — ksav
– ksav, Commented Dec 20, 2018 at 16:53

ksav · Accepted Answer · 2018-12-20 17:01:25Z

1

There shouldn't be any need to select anything in the DOM like you are attempting with the use of document.getElementById('bio__subtext').

You can declare variables right in your component where they are needed or pass then into the component via a prop from a higher context (a page or another component).

class Bio extends React.Component {
  render () {
    const name = 'Natalie'
    const phrases = [
      'Cowabunga',
      'Its Ninja Time',
      'Booyakasha'
    ]
    return (
      <div id="bio">
        Hi, I'm {name}!<br />
        Some of my favourite phrases are:
        <ul>
          {phrases.map(phrase => <li>{phrase}</li>)}
        </ul>
      </div>
    )
  }
}

edited Dec 20, 2018 at 17:01

answered Dec 20, 2018 at 16:58

ksav

20.9k6 gold badges52 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Natalie Over a year ago

thank you for this; however I want to animate between the phrases, rather than just print them out. Something similar to this: codepen.io/soulwire/pen/mErPAK

ksav Over a year ago

Ok but I think you need to walk before you can run. Work on figuring out the basics of structuring your app and passing data around before asking another more specific question here on stackoverflow.

Natalie Over a year ago

So I declare my phrases as you have, and then pass them into the JS?

Derek Nguyen Over a year ago

@Natalie the official react tutorial is an excellent resource, the part about state & life cycle will be of your interest reactjs.org/docs/hello-world.html

ksav Over a year ago

You could create an array of phrases and pass them to a TextScrambler component. Within that component you would have access to the the array via props. Then you could write the text scramble logic inside that component.

|

Collectives™ on Stack Overflow

JS not running on Gatsby

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related