Simple javascript in ReactJS component not working

Question

This is my component:

import React, {Component} from 'react';
import 'D:/School/Alta/interactiveweb/src/webapp/src/App.css'

class Chat extends Component {

  test() {
    alert();
  }

  render() {
    return <nav onClick={this.test()} className={"menu"} id={"Chat"}>
        <div className={"menu-itemContainer"}>
            <div className={"menu-item"}>
                <img alt={""} className={"chatPF"} src={require('./Images/defaultPF.png')}/>
                <a className={"chatname"}>Test</a>
                <a className={"chatlastuser"} id={"chatlastuser"}>
                    <font color={"orange"}>Bram: </font>wow wtf...
                </a>
                <a className={"chatlasttime"}>20:28</a>
            </div>
        </div>
    </nav>;
  }
}

export default Chat;

when starting it will run the function multiple times but when it's loaded and I click the nav it won't work.

Please don't upload [images of code](https://meta.stackoverflow.com/a/285557/3082296). They can't be copied to reproduce the issue, they aren't searchable for future readers and they are harder to read than text. Please post the actual code **as text** to create a [mcve]. — adiga, Sep 30 '20 at 17:20

score 1 · Accepted Answer · 2020-09-30T17:28:01.150

Instead of onClick={this.test()}, you need to use onClick={this.test}. As you had it, it called the function immediately and left undefined in the onClick listener. By passing the function as-is, you ensure that it will be called properly when the element is clicked.

While onClick={()=>this.test()} would work, it adds another function to the call stack unnecessarily because in JavaScript functions are first-class objects.

Ross Sheppard · Answer 2 · 2020-09-30T17:28:42.750

You can learn more about events in React here. That being said, the following should work. You were calling the function every time the component render, but you want to call it only when the click occurs. To do that, you should just pass the handler / method that will then get fired.

import React, {Component} from 'react';
import 'D:/School/Alta/interactiveweb/src/webapp/src/App.css'

class Chat extends Component {
  test() {
    alert();
  }

  render() {
    return <nav onClick={this.test} className="menu" id="Chat">
        <div className="menu-itemContainer">
            <div className="menu-item">
                <img alt="" className="chatPF" src={require('./Images/defaultPF.png')}/>
                <a className="chatname">Test</a>
                <a className="chatlastuser" id="chatlastuser">
                    <font color="orange">Bram: </font>wow wtf...
                </a>
                <a className="chatlasttime">20:28</a>
            </div>
        </div>
    </nav>;
  }
}

export default Chat;

An answer without an explanation is not so useful. – devserkan Sep 30 '20 at 17:25 — devserkan, Sep 30 '20 at 17:25

score 0 · Answer 3 · answered Sep 30 '20 at 17:22

0

Change it to either onClick={this.test} or onClick={()=>this.test()}.

You don't want to call the functions in attributes, you just want to declare them. They will be called when the click event happens.

answered Sep 30 '20 at 17:22

Dave Cook

617
1
5
17

This answer is good, but I wouldn't suggest using `()=>this.test()` because it adds another function to the call stack unnecessarily. In JS functions are [first-class objects](https://stackoverflow.com/questions/245192/what-are-first-class-objects). – Sep 30 '20 at 17:27

Simple javascript in ReactJS component not working

3 Answers3