I'm trying to make a sticky header by getting DOM element and passing a function to it with ponentDidMount, but get an error, that the 'const' is a Unexpected keyword:

ponent:

class Header extends Component {

  ponentDidMount(){
    window.addEventListener('scroll', () => {
      const isTop = window.scrollY > 100,
      const nav = document.getElementById('nav');
      if (isTop) {
        nav.classList.add('scrolled');
      }else {
        nav.classList.add('scrolled');
      }
    });
  }

  ponentWillUnmount() {
    window.removeEventListener('scroll');
  }


  render() {
    return (<>
      <header>
        <nav class="nav" id="nav">
          <ul class="header-list">
            <li>
              <img alt='phone' src={phonelogo} />
            </li>
            <li>123456789</li>
          </ul>
          <ul class="header-list">
            <li>
              <img alt='email' src={email} />
            </li>
            <li>[email protected]</li>
          </ul>
        </nav>
      </header>
    </>)
  };
};


export default Header;

the error:

Line 17:7:  Parsing error: Unexpected keyword 'const'

  15 |     window.addEventListener('scroll', () => {
  16 |       const isTop = window.scrollY > 100,
> 17 |       const nav = document.getElementById('nav');
     |       ^
  18 |       if (isTop) {
  19 |         nav.classList.add('scrolled');
  20 |       }else {

Though, it's probably better to use React refs, but it's still interesting what is going on here.

I'm trying to make a sticky header by getting DOM element and passing a function to it with ponentDidMount, but get an error, that the 'const' is a Unexpected keyword:

ponent:

class Header extends Component {

  ponentDidMount(){
    window.addEventListener('scroll', () => {
      const isTop = window.scrollY > 100,
      const nav = document.getElementById('nav');
      if (isTop) {
        nav.classList.add('scrolled');
      }else {
        nav.classList.add('scrolled');
      }
    });
  }

  ponentWillUnmount() {
    window.removeEventListener('scroll');
  }


  render() {
    return (<>
      <header>
        <nav class="nav" id="nav">
          <ul class="header-list">
            <li>
              <img alt='phone' src={phonelogo} />
            </li>
            <li>123456789</li>
          </ul>
          <ul class="header-list">
            <li>
              <img alt='email' src={email} />
            </li>
            <li>[email protected]</li>
          </ul>
        </nav>
      </header>
    </>)
  };
};


export default Header;

the error:

Line 17:7:  Parsing error: Unexpected keyword 'const'

  15 |     window.addEventListener('scroll', () => {
  16 |       const isTop = window.scrollY > 100,
> 17 |       const nav = document.getElementById('nav');
     |       ^
  18 |       if (isTop) {
  19 |         nav.classList.add('scrolled');
  20 |       }else {

Though, it's probably better to use React refs, but it's still interesting what is going on here.

• javascript
• reactjs
• react-native
• dom

2 Answers 2

You have written:

 const isTop = window.scrollY > 100,
 const nav = document.getElementById('nav');

You need to replace the ma with a simicolon at the end of line 16. Like so:

 const isTop = window.scrollY > 100;
 const nav = document.getElementById('nav');

Line 16. You must remove the Comma or else reomve the const on line 17