React Button onClick pass arguments

Question

I am trying to call a function after the button has been clicked, which is possible so far but I have problems in passing the argument.

This is my first React App so bear with me.

In the this part the onClick event calling the "clickedQuickreply()" wont work

It fires a "TypeError: Cannot read property 'value' of undefined"

export function showMessage() {
  console.log("Show Message");

  let timeStamp = messages.giveTimestamp("not set");
  let listItems = messageList.map(d => (
    <p className={d.senderId} key={d.senderId}>
      {" "}
      {d.text}{" "}
    </p>
  ));

  let listreply = quickReplyList.map(d => (
    <button
      className="quickReplyButton"
      key={d.id}
      value={d.qrText}

      **onClick={clickedQuickreply(this.value)}**
    >

      <span> {d.qrText} </span>
    </button>
  ));

  return (
    <div>
      <div className="timestamp">{timeStamp}</div>
      <ul>{listItems}</ul>
      <div className="quickreply">{listreply}</div>
    </div>
  );
}
export function clickedQuickreply(e) {
  console.log("Clicked", e);
  quickReplyList.length = 0;
  //send.sendMessageToServer(query);
}

This is the code where it renders. Named App.js "main" Normally I wanted to do the re-rendering everytime a fetch Request has completed, but my React understanding is not that far I guess.

class MessageDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.state = null;
  }

  componentDidMount() {
    window.addEventListener("click", this.tick.bind(this));
    window.addEventListener("keypress", this.tick.bind(this));
  }

  componentWillUnmount() {
    window.removeEventListener("click", this.tick.bind(this));
    window.removeEventListener("keypress", this.tick.bind(this));
  }
  componentDidUpdate() {}

  tick() {
    this.forceUpdate();
  }

  render() {
    setTimeout(() => {
      this.forceUpdate();
    }, 2000);
    return (
      <div className="chatBox">
        <ui.showMessage />
      </div>
    );
  }
}

So how do you pass an argument in that situation for example? Thanks for your time and patience.

Arup Rakshit · Accepted Answer · 2018-08-20 11:14:59Z

2

You should write onClick={clickedQuickreply(this.value)} as onClick={clickedQuickreply}. React will execute the function by passing it the event object as argument internally.

One more thing I notcied here is that, you no need to export the function clickedQuickreply, as it can be private used as callback function as you did now by attaching it with the onClick props. So write it without export and define it inside the showMessage function.

answered Aug 20, 2018 at 11:14

Arup Rakshit

119k30 gold badges270 silver badges328 bronze badges

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

4 Comments

Derek Haynes Over a year ago

Thanks for your answer. Now the programm at least doesnt crash. Will update once done.

Derek Haynes Over a year ago

So the event surely is being passed. But how do you get the button value? Which is important as to know which button was clicked? When calling e.value inside "clickedQuickreply" it returns "undefined"

Arup Rakshit Over a year ago

@DerekHaynes it will be e.target.value

Derek Haynes Over a year ago

wow thanks a lot. I was tinkering around with it but didnt realized it was working. Thanks a lot for the hint.

Collectives™ on Stack Overflow

React Button onClick pass arguments

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related