Using in JS classes defined in React | Example - {s.fistItem}?

Question

React

Hello everyone) I 'm learning React and ran into a problem, when using the modularity of css files in a component, there are problems when accessing the desired class in JS . The whole problem is that I set the class {s.logo}and in the browser I get the already generated class. There is an option to set the IDHeader_logo__3IwlL
in addition to the class , in general, yes, but in this situation I still need to use this piece of code in another component and it will turn out that two are the same ID . in JS , applied this method to all other elements:

$('#logo').click( () => {
    // code
  })

/* component code */

import { NavLink } from "react-router-dom";
import React from 'react'

import SettingList from './SettingList';  // дополнительная компонента выпадающего списка
import s from './scss/Header.module.scss' // подключение модуля scss
import theme from '../scripts/theme.js' // собственно сам файл JS в котором я пытаюсь взять класс 


const Header = (props) => {
  return (
      <header>
        <nav className = {s.navBar}>
        <div className = {s.logo} id = 'logo'>
          <div className = {s.img}></div>    
        </div>
        <div className={s.fistItem} id = 'list'>
          <NavLink to="/list" activeClassName = {s.active}>List</NavLink>
            <div className={s.activeLine} id='line'></div>
        </div>
        <div className={s.fistItem} id = 'new'>
          <NavLink to="/new" activeClassName = {s.active}>Add person</NavLink>
        </div>

        {/* Работа с выпадающим списком и иконкой */}
        <div className={s.more}>
          <div className={s.icon} id = 'more'></div>
        </div>
        <div id = 'setList'>
          <SettingList />
        </div>
        <div className={s.hr} id = 'hr'></div>
      </nav>
    </header>
  )
}

export default Header;

I've been struggling with this for several days now, so I would be very grateful for your help.

Answer 1

when using the modularity of css files in a component, there are problems when accessing the desired class in JS.

Forget this approach in React development. Remove jQuery from the project and learn how to work with state.
Example:

class Example extends React.Component {
  state = {
    shouldShowMenu: false,
  };
  
  handleToggleMenuClick = () => {
    this.setState(state => ({
      shouldShowMenu: !state.shouldShowMenu,
    }));
  };
  
  render() {
    const { shouldShowMenu } = this.state;
 
    return (
      <div>
         <button onClick={this.handleToggleMenuClick}>Toggle menu</button>
         {shouldShowMenu && <Menu />}
      </div>
    );
  }
}

Answer 2

if you really need to somehow mark the node, do it through ref
, but such cases very rarely arise if you do everything declaratively.