Cannot set property className of #<SVGElement> which has only a getter

[m-ret]

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 comes 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 ?

[ibrierley]

Is there any Snap in there ?

[MichaelBuerge]

I stumbled over the same problem a couple of days ago. SVG elements don't
seem to respond to setting the className property.
Use elem.setAttribute('class', 'foo')

      <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>

Btw, the attribute name is 'class', not 'className'.
I believe the mismatch between the attribute name and property name on the
JS object is historical. Older JS interpreters didn't like language
keywords to dereference properties using dot notation, eg. object.class or
object.long (object['class'] and object['long] always worked however).

[Llbe]

Use baseVal: foo.className.baseVal = 'foo bar'

[MichaelBuerge]

Use baseVal: foo.className.baseVal = 'foo bar'

Thanks for making me realize className on SVG elements is also a
SVGAnimatedString.
Using setAttribute() will work, but this is better.