Import React Variables?

Question

JavaScript

Evening at home! There was a problem, I have a component, I used js in it, but for convenience I changed some functions in javascript a little (I made such a mini library for myself), here is an example:

var $ = (selector) => {
  return document.querySelector(selector)
}

After that, I decided to take this whole thing into a separate .js file and import it into the React component, but then the compiler boldly sends me n..., with such an error Line 7: '$' is not defined no-undef. React just doesn't see the $ variable even though I imported everything into the component, here's the code:

import React, { Component } from 'react';

import './style.css';
import './param';

class Nav_btn extends Component { 
componentDidMount = () => {
  $('#nav-trigger').onclick = () => {
    $('#menu-navigation').classList.add('active');
    $('#menu-close').classList.add('active');
  }
}

render() {
  return (
      <div>
        <button id = 'nav-trigger'><div>Menu</div></button>
      </div>
    );
}
}
export default Nav_btn;

and in param.js is the above code:

var $ = (selector) => {
  return document.querySelector(selector)
}

To be honest, I don’t understand what the problem might be, so I wrote here, mayday! mayday!

Answer 1

export default function (selector) {
  return document.querySelector(selector)
}

.......

import $ from './param'

only in react it is better to hang onClick on the button, and there it is already somehow through the state to substitute the desired class when rendering