My React app has a base div like so:
<body>
<div id="root">
....
</div>
</body>
In my Wele container, I would like to add a class to the div w id="root and then on Wele container unmount, remove the class.
class Wele extends React.Component {
ponentDidMount() {
console.log('ponentDidMount');
console.log($('#root'));
}
....
With jQuery I could do something like
$('#root').addClass('myClass')
....
$('#root').removeClass('myClass')
What is the equivalent in React for adding and removing a class on a div after finding it by its ID?
My React app has a base div like so:
<body>
<div id="root">
....
</div>
</body>
In my Wele container, I would like to add a class to the div w id="root and then on Wele container unmount, remove the class.
class Wele extends React.Component {
ponentDidMount() {
console.log('ponentDidMount');
console.log($('#root'));
}
....
With jQuery I could do something like
$('#root').addClass('myClass')
....
$('#root').removeClass('myClass')
What is the equivalent in React for adding and removing a class on a div after finding it by its ID?
Share Improve this question edited Aug 2, 2019 at 17:15 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Jul 9, 2017 at 15:27 AnApprenticeAnApprentice 111k202 gold badges637 silver badges1k bronze badges 5- Can I ask why? React isn't meant to work seamlessly with jQuery because it can violate React's lifecycle and convention. – Andrew Li Commented Jul 9, 2017 at 15:30
- I'm not trying to use jQuery, I'm looking for the React way of doing something in jQuery. – AnApprentice Commented Jul 9, 2017 at 15:31
- Oh whoops, sorry. You could definitely find the DOM node and add a class but I don't think that would be a good idea. What's the underlying problem? – Andrew Li Commented Jul 9, 2017 at 15:34
-
1
Why is adding
classspecial? I think you are asking how to set a property to a parent in React. I don't think you should look for "jQuery way" to do things in React, they are fundamentally different. I don't think you should useidattributes in any way while using react. Apart from that,rootis just an HTML element, you can simply add/remove classes as you do with any HTML element. – XCS Commented Jul 9, 2017 at 15:35 -
1
You could simply have a
rootClassproperty in yourstorestate if you useredux. – XCS Commented Jul 9, 2017 at 15:36
1 Answer
Reset to default 6This makes no sense. You shouldn't be adding classes to root from React ponents. The root div should just exist to inject React in to using ReactDOM.
Instead of modifying the html root, create a react class called App or something and render a <div className="app" /> that wraps all of your ponents. You can then use React state or props to modify the className.
class App extends React.Component {
constructor() {
super();
this.state = {
appClass: 'myClass'
};
}
ponentDidMount() {
this.setState({ appClass: 'newClass' });
}
render() {
return (
<div className={this.state.appClass}>
// Render children here
</div>
);
}
}
If you want to modify the appClass from a child ponent such as Wele which is further down in your application then you will need to use a state management like Redux or Flux to modify the className from a child ponent otherwise it will get messy fast.
EDIT: removed semicolon from this.state object