What is wrong with this code (React- declaration of function)

JavaScript
#1

my full code: https://codepen.io/Assblack/pen/XwpqeQ

I´m trying to put an onClick event in each .drum-pad element… So i Googled and found this code on Stackoverflow:

onItemClick: function (event) {

    event.currentTarget.style.backgroundColor = '#ccc';

},
render: function() {
    return (
        <div>
            <ul>
                <li onClick={this.onItemClick}>Component 1</li>
            </ul>
        </div>
    );
}

So this is what I do: (between asterics is what i have added)

class DrumPad extends React.Component{
  constructor(props){
    super(props)
  }
  **onItemClick: function (event) {**

**    event.currentTarget.style.backgroundColor = '#ccc';**

**}**
  render(){
    return(
        <div **onClick={this.onItemClick}** className="drum-pad" id="Heater-1"><audio src="" className="clip" id="Q"></audio>Q</div>
        <div className="drum-pad" id="Heater-2"><audio src="" className="clip" id="W"></audio>W</div>
        <div className="drum-pad" id="Heater-3"><audio src="" className="clip" id="E"></audio>E</div>
        <div className="drum-pad" id="Heater-4"><audio src="" className="clip" id="A"></audio>A</div>
        <div className="drum-pad" id="Clap"><audio src="" className="clip" id="S"></audio>S</div>
        <div className="drum-pad" id="Open-HH"><audio src="" className="clip" id="D"></audio>D</div>
        <div className="drum-pad" id="Kick-n'-Hat"><audio src="" className="clip" id="Z"></audio>Z</div>
        <div className="drum-pad" id="Kick"><audio src="" className="clip" id="X"></audio>X</div>
        <div className="drum-pad" id="Closed-HH"><audio src="" className="clip" id="C"></audio>C</div>
      </div>
    )
  }
}

It gives me error of “Unexpected token (7:13)” when I try to put the onItemClick declaration inside DrumPad component.

Why is that, and how could I do it the right way?

#2

Hi, You are using class based react component, so instead of :, use = before function keyword. here is the correct code.

onItemClick = function (event) {
    event.currentTarget.style.backgroundColor = '#ccc';
}
#3 
onItemClick: function (event) {
  event.currentTarget.style.backgroundColor = '#ccc';
}

It’s a class, not an object, that’s invalid syntax

onItemClick(event) {
  event.currentTarget.style.backgroundColor = '#ccc';
}

Or (using class properties syntax, which will work fine if you’re using create react app, which has the necessary Babel plugin setup to allow it):

onItemClick = (event) => {
  event.currentTarget.style.backgroundColor = '#ccc';
};

If you need to pass it on and don’t want to have to bind it (note the semicolon)

#4

thanks. By the way would you know how can I change this

event.currentTarget.style.backgroundColor = '#ccc';

To instead change the backgroundColor, change or add a css class?

For example:

event.currentTarget.addClass = 'smallDivClass';
#5

You can use classList and add/remove or toggle.

event.currentTarget.classList.toggle('smallDivClass');

Just remember you have high specificity on the selector that sets the background color #grid-keys .drum-pad, so you can’t overwrite it by just adding a class, in this case, if all it is doing is toggling some style using !important is fine.

.smallDivClass {
  background: red !important;
}

BTW. I’m guessing the code you found might have been really old. I believe the syntax would work with React createClass (old syntax don’t use it).

1 Like
#6