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

Honestly, you shouldn't even need jQuery for handling click events and adding classes, you should have React do that. — Andrew Li
– Andrew Li, Commented Jun 5, 2017 at 12:29
I second Andrew Li, you need to move on from jQuery, and figure this out in React. If you refactor this question, and ask how you could implement something like this in React, you be much better off. — Dan Zuzevich
– Dan Zuzevich, Commented Jun 5, 2017 at 12:34

Shubham Khatri · Accepted Answer · 2017-06-05 13:01:49Z

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>

edited Jun 5, 2017 at 13:01

answered Jun 5, 2017 at 12:43

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

sujeesh Over a year ago

sujeesh Over a year ago

in the return i am having these two divs one for right and one for left.

Shubham Khatri Over a year ago

You need to have an onClick on whichever div you want to click as mentioned in the above snippet

sujeesh Over a year ago

<div id="left_arrow" className="left_arrow" onClick={this.handleClick}><i className="fa fa-chevron-left" /></div> where i need to place this.state

Shubham Khatri Over a year ago

Where do you want to add this class. Can you add your React code

|

Collectives™ on Stack Overflow

How to import js file in react component?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related