Mesuti

$('.open-category').click(function() {
  $(`.d-none[data-id="${this.dataset.id}"]`).toggleClass('active');
});

for (const n of document.getElementsByClassName('open-category')) {
  n.addEventListener('click', onClick);
}

function onClick({ target: { dataset: { id } } }) {
  document.querySelector(`.d-none[data-id="${id}"]`).classList.toggle('active');
}

const elements = new Map(Array.from(
  document.querySelectorAll('.open-category'),
  n => [ n, document.querySelector(`.d-none[data-id="${n.dataset.id}"]`) ]
));

document.addEventListener('click', e => {
  elements.get(e.target)?.classList.toggle('active');
});

return (
     <input
        className={props.name !== ''?'deff  metal':' deff  energ'}
      />
   )

import React from 'react';
import './App.css';

const App = () =>{

    return (<div className="App">Hello</div>)


}