Not able to call function from React Js Button Click

Question

I have Message.js -

import React from 'react';
import { Button } from 'reactstrap';
class Message extends React.Component
{
    constructor()
    {
super()
this.state={
    message:"This is message"
}
    }
    changeMessage() {
        alert("In");
        this.setState({
            message :"message changed"
        });
    }
    render=()=> {
        return <div>
            <h1>{this.state.message}</h1>
            <Button onClick="{this.changeMessage}" color="success">success</Button>
        </div>
    }
}
export default Message

Button click is not working here. I tried with -

<Button onClick={changeMessage} color="success">success</Button>

Then Also Tried -

<Button onClick="changeMessage()" color="success">success</Button>

This also did not work.

Uncaught TypeError : this.props.onClick is not a function.

In your case, you should add the binding function in the constructor just like this. constructor() { ... this.changeMessage = this.changeMessage.bind(this) ... } or you can define the changeMessage function as the arrow function just like this. changeMessage = () => { ..... } — React Native Developer
– React Native Developer, Commented Nov 4, 2020 at 5:34

Ketan Ramteke · Accepted Answer · 2020-11-04 05:49:25Z

1

class Message extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "This is message",
    };
  }
  changeMessage = () => {
    alert("In");
    this.setState({
      message: "message changed",
    });
  };
  render = () => {
    return (
      <div>
        <h1>{this.state.message}</h1>
        <button onClick={this.changeMessage} color="success">
          success
        </button>
      </div>
    );
  };
}
export default Message;

PS: Bhau, as you said you are new to React then I would highly recommend you Fullstack Open part1 - part4, an amazing resource, and very structured. It will probably take a week to complete and you will learn a lot more than typical Udemy or other tutorial series.

edited Nov 4, 2020 at 5:49

answered Nov 4, 2020 at 5:32

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

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

Comments

akhtarvahid · Accepted Answer · 2020-11-04 05:30:26Z

1

You don't need to put quotation for functions in reactjs.

Just assign like this.

<Button onClick={this.changeMessage} color="success">success</Button>

and function

changeMessage = () => {
        alert("In");
        this.setState({
            message :"message changed"
        });
    }

answered Nov 4, 2020 at 5:30

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Comments

kooskoos · Accepted Answer · 2020-11-04 05:31:53Z

1

No inverted commas

<Button onClick={this.changeMessage} color="success">success</Button>

Please bind the function in the constructor or use arrow functions.

edited Nov 4, 2020 at 5:31

answered Nov 4, 2020 at 5:28

kooskoos

4,9391 gold badge17 silver badges31 bronze badges

4 Comments

Guruparan Giritharan Over a year ago

Also changeMessage() { should be changeMessage=()=> { as he is using this.state inside that

Ketan Ramteke Over a year ago

I think he also has to do function binding in the constructor.

kooskoos Over a year ago

Yes, I am mentioning that too

C Sharper Over a year ago

@KetanRamteke barobar aahe tumch , mi navin aahe yatt tyamule kahi chuka rahat aahet.

Sarun UK · Accepted Answer · 2020-11-04 05:31:57Z

1

<Button onClick={this.changeMessage} color="success">success</Button>

<Button onClick={() => {this.changeMessage(your params)}} color="success">success</Button>

answered Nov 4, 2020 at 5:31

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

Comments

Priyanka Panjabi · Accepted Answer · 2020-11-04 05:31:59Z

1

onClick={this.changeMessage} need not to be a string .

Try this :

<Button onClick={()=>this.changeMessage()} color="success">success</Button>

answered Nov 4, 2020 at 5:31

Priyanka Panjabi

4411 gold badge5 silver badges14 bronze badges

Comments

sindhuja sundaralingam · Accepted Answer · 2020-11-04 05:34:49Z

1

The onClick you passed should be a function and the function has to be bound to use "this" pointer inside the "changeMessage" function, so you can try using as follows,

<Button onClick={this.changeMessage.bind(this)} color="success">success</Button>

answered Nov 4, 2020 at 5:34

sindhuja sundaralingam

113 bronze badges

Collectives™ on Stack Overflow

Not able to call function from React Js Button Click

6 Answers 6

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related