How to change style using javascript in reactjs

Question

class Hello extends Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        document.getElementsByClassName("hello").style.color = 'red';
    }
    render(){
        return (
            <div className="hello" onClick={this.handleClick}>hello</div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

I am getting error

TypeError: Cannot set property 'color' of undefined

This can happen if: 1)No elements were found with that class. 2) If an invalid index is used to access the elements in the array. — Aravind S
– Aravind S, Commented Aug 2, 2018 at 5:55
The preferable way would be to not mutate DOM yourself, let React take care of it. React does this more efficiently for you. Use the style prop. — hazardous
– hazardous, Commented Aug 2, 2018 at 6:52

Shubham Agarwal Bhewanewala · Accepted Answer · 2018-08-02 06:48:45Z

4

You can probably use react way too

class Hello extends Component{
    constructor(props){
        super(props);
        this.state = {
            customColor: {}
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        this.setState(() => ({ customColor: { color: 'red' } }));
    }

    render(){
        return (
            <div className="hello" style={this.state.customColor} onClick={this.handleClick}>hello</div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

The benefit of doing so is that any component created either single or multiple times each of these will have there on set of state and functions and everything. So when I handleclick for one component then it will affect the same component giving it an isolation.

edited Aug 2, 2018 at 6:48

answered Aug 2, 2018 at 6:34

Shubham Agarwal Bhewanewala

1,1191 gold badge9 silver badges22 bronze badges

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

Comments

Ishwar Patil · Accepted Answer · 2018-08-02 06:14:36Z

3

document.getElementsByClassName returns you the array of selected elements. Hence,

Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names. https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

In this case, you need to specify the index of the element to be used. Notice, [0] below;

document.getElementsByClassName("hello")[0].style.color = 'red';

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
        document.getElementsByClassName("hello")[0].style.color = 'red';
    }
    render(){
        return (
            <div className="hello" onClick={this.handleClick}> hello </div>
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

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

<div id="root"></div>

To work on all the elements with the same class, you need to iterate over the array and change the colors for each.

class Hello extends React.Component{
    constructor(props){
        super(props);
        this.state = {
        }
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick() {
      let elms = document.getElementsByClassName("hello");

      for(var i = 0; i < elms.length; i++) {
        elms[i].style.color = 'red';
      }
    }
    
    render(){
        return (
          <div>
            <div className="hello" onClick={this.handleClick}> hello 1 </div>
            <div className="hello" onClick={this.handleClick}> hello 2 </div>
            <div className="hello" onClick={this.handleClick}> hello 3 </div>
          </div>
           
          
        );

    }
}

ReactDOM.render(
    <Hello/>,
    document.getElementById('root')
);

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

<div id="root"></div>

edited Aug 2, 2018 at 6:14

answered Aug 2, 2018 at 5:54

Ishwar Patil

1,7363 gold badges12 silver badges20 bronze badges

10 Comments

Biswajit Over a year ago

This is working fine but how can i do this for all element of same class

Ishwar Patil Over a year ago

Added to the answer according to your comment

Biswajit Over a year ago

Smiles, I dont want to use for lop. I have to find another way. To change style dynamically

Ishwar Patil Over a year ago

To be honest, that's a different question. I was just helping you to get your original problem solved. If your original question is resolved, feel free to accept the answer, so that somebody stuck with similar question can also be benefitted from this. Hope that helps.

Biswajit Over a year ago

Sure. I will. But it didnt solve my problem. But You are correct.

|

Collectives™ on Stack Overflow

How to change style using javascript in reactjs

2 Answers 2

Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related