Simple javascript in ReactJS component not working [duplicate]

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. 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 minimal reproducible example. — adiga
– adiga, Commented Sep 30, 2020 at 17:20

score 1 · Accepted Answer · 2020-09-30 17:28:01Z

1

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.

edited Sep 30, 2020 at 17:28

answered Sep 30, 2020 at 17:22

user4945014

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

Comments

Ross Sheppard · Accepted Answer · 2020-09-30 17:28:42Z

1

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;

edited Sep 30, 2020 at 17:28

answered Sep 30, 2020 at 17:24

Ross Sheppard

8701 gold badge6 silver badges14 bronze badges

2 Comments

devserkan Over a year ago

An answer without an explanation is not so useful.

Ross Sheppard Over a year ago

I was editing it.

Dave Cook · Accepted Answer · 2020-09-30 17:22:13Z

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, 2020 at 17:22

Dave Cook

7272 gold badges6 silver badges20 bronze badges

1 Comment

user4945014 Over a year ago

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.

Collectives™ on Stack Overflow

Simple javascript in ReactJS component not working [duplicate]

3 Answers 3

Comments

2 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Linked

Related