The full error in the browser console in this

Uncaught TypeError: Cannot set property className of # which has only a getter

I am trying to put a class with Javascript everytime an action happens, this is the code

performClick (sideBet) {
    switch (sideBet) {
    case 'SuitEmUp':
        document.getElementById('SuitEmUp').className = 'animated shake';
        break;

    case 'PerfectPairs':
        document.getElementById('PerfectPairs').className = 'animated shake';
        break;

    default:
        console.log('Sorry, we are out of ' + sideBet + '.');
    }
}

and then changed that code to only this in my Reactjs app

performClick (sideBet) {
    this.refs[sideBet].getDOMNode().className = 'animated shake';
}

and the same error es up...

HTML

<div ref="sideBetsLeft">

  <svg id="PerfectPairs" onClick={this.performClick.bind(this, 'PerfectPairs')}
       ref="PerfectPairs" className="side-bet" viewBox={viewBoxVal}></svg>

  <svg id="SuitEmUp" onClick={this.performClick.bind(this, 'SuitEmUp')}
       ref="SuitEmUp" className="side-bet" viewBox={viewBoxVal}></svg>

</div>

So, I don't know what is going on here. Any suggestions?

The full error in the browser console in this

Uncaught TypeError: Cannot set property className of # which has only a getter

I am trying to put a class with Javascript everytime an action happens, this is the code

performClick (sideBet) {
    switch (sideBet) {
    case 'SuitEmUp':
        document.getElementById('SuitEmUp').className = 'animated shake';
        break;

    case 'PerfectPairs':
        document.getElementById('PerfectPairs').className = 'animated shake';
        break;

    default:
        console.log('Sorry, we are out of ' + sideBet + '.');
    }
}

and then changed that code to only this in my Reactjs app

performClick (sideBet) {
    this.refs[sideBet].getDOMNode().className = 'animated shake';
}

and the same error es up...

HTML

<div ref="sideBetsLeft">

  <svg id="PerfectPairs" onClick={this.performClick.bind(this, 'PerfectPairs')}
       ref="PerfectPairs" className="side-bet" viewBox={viewBoxVal}></svg>

  <svg id="SuitEmUp" onClick={this.performClick.bind(this, 'SuitEmUp')}
       ref="SuitEmUp" className="side-bet" viewBox={viewBoxVal}></svg>

</div>

So, I don't know what is going on here. Any suggestions?

• javascript
• svg

• what version of React are you using? – hex13 Commented Nov 4, 2015 at 18:08
• @hex13 "react": "0.13.3" – Non Commented Nov 4, 2015 at 18:10
• maybe something SVG related? What would happen if you had <div> instead of <svg> element? There would also be an error? – hex13 Commented Nov 4, 2015 at 18:16
• @hex13 if I remove the svg and put a div instead, I can't see anything in the view. – Non Commented Nov 4, 2015 at 18:18
• 1 btw. probably related: stackoverflow./questions/8638621/… – hex13 Commented Nov 4, 2015 at 18:20

1 Answer 1

Try to set class attribute instead of setting property className:

this.refs[sideBet].getDOMNode().setAttribute('class', 'animated shake');