How to add class to element in reactjs?

Question

I do following statement to add 'hold-transition login-page' class to the <body id='the_body'> element

import React, { Component,useEffect } from 'react';
export default class Login extends React.Component {
componentDidMount() {
document.getElementById("the_body").classList.add('hold-transition login-page')
}
render() {
return(
<div className="login-box">
...some html script
</div>
)
}

but I get this error

InvalidCharacterError: String contains an invalid character
componentDidMount

I am already make simple javcript code inside  `componentDidMount()`

componentDidMount(){
 alert('test javascript inside jsx');
}

it is running well. but why my dom statement is error?. finaly I hope you to fix my problem, thank you

Duplicate JavaScript element.classList.add("fa fa-hand-rock-o") Error: "String contains an invalid character" although you really shouldn't manipulate DOM directly in React. — Guy Incognito
– Guy Incognito, Commented Sep 11, 2020 at 8:13

lastr2d2 · Accepted Answer · 2020-09-11 08:13:49Z

1

This is not how people modify classes with React but the problem in your example is that "hold-transition login-page" is not a valid class name.

If you want to add multiple class names you should try

classList.add("hold-transition", "login-page")

answered Sep 11, 2020 at 8:13

lastr2d2

4,0243 gold badges27 silver badges43 bronze badges

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

1 Comment

Alimin Over a year ago

thank you bro, I realize my mistake now I clone my dom statement 1.add class hold-transition 2.add class login-page classList.add("hold-transition") classList.add("login-page") its' work

Collectives™ on Stack Overflow

How to add class to element in reactjs?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related