How to convert jQuery code to ReactJS ?
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#wrapper").toggleClass("toggled");
});
-
2You should see this. stackoverflow.com/questions/23585765/…parlad– parlad2017-05-03 06:51:38 +00:00Commented May 3, 2017 at 6:51
-
1As mentioned, ReactJS don't use the same development logic. You should first learn components logic before.Alexis– Alexis2017-05-03 06:55:38 +00:00Commented May 3, 2017 at 6:55
Add a comment
|
2 Answers
React works in different way to manipulate your DOM and events. To achieve the same function, you can do something like this:
MyComponent extends React.Component{
constructor(props) {
super(props);
this.state = {
toggled: false
};
this.toggleMenu = this.toggleMenu.bind(this);
}
toggleMenu() {
let isToggled = this.state.toggled;
this.setState({ toggled: !isToggled});
}
render() {
let buttonClass = (this.state.toggled) ? 'toggled' : '';
return (
<div className={buttonClass}>
<button id="menu-toggle" onClick={this.toggleMenu}>Toggle Menu</button>
</div>
);
}
};
Basically, different from jQuery, you should control your DOM with state and props. Please check React.js docs for conditional rendering: https://facebook.github.io/react/docs/conditional-rendering.html
2 Comments
Scarfseerisen
I want to try this one blackrockdigital.github.io/startbootstrap-simple-sidebar
DevOverlord
2 years later. Found this comment on Google because I am trying to do the same thing with one of their templates. Lolz. Their SB Admin 2 Template has a collapsible sidebar that I want to emulate with React and I am not skilled at all with Frontend Frameworks.
As mentioned before React is a different animal for certain reasons explained. To achieve the same functionality using React Hooks please refer to the following code :
import React,{useState} from 'react';
export default function MyComponent() {
const[toggled,setToggled] = useState(false)
const buttonClass = (toggled)? 'toggled':'';
return(
<div className={buttonClass}>
<button
id="menu-toggled"
onClick={()=>setToggled(!toggled)}>
press
</button>
</div>
)
};
Please take a look at Stackblitz example
