How to import js file in react component?

Question

$( "#left_arrow" ).click(function() {   
  if ($(".left_block").hasClass("w-0")) {
     $(".left_block" ).removeClass("w-0");        
   }else{
     $(".left_block" ).addClass("w-0");
   }
 });

In the custom.js I am having the script code above feature is not working when importing with below.

 import * as script from '../js/custom.js';

In the Html page when I load this file its working but when writing in react component its not working

Answer 1

You should not mix with jquery with React, What you want to achieve can easily be implemented in React like

 class App extends React.Component { state = { class: 'w-0' } handleClick=()=> { if(this.state.class === 'w-0') { this.setState({class: ''}) } else{ this.setState({class: 'w-0'}) } } render() { return ( <div> <div id="left_arrow" className="left_arrow" onClick={this.handleClick}><i className="fa fa-chevron-left" />Arrow</div> <div className={"left_block " + this.state.class}>Hello World</div> </div> ) } } ReactDOM.render(<App/>, document.getElementById('app')) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <div id="app"></div>