React onclick listener

Question

So I've created and followed several tutorials but I still can't get the onClick listener to work. Can anyone Advise, please?

I have tried to implement the given example (based my code off of that and similar) and the onClick function is not being called. I have also tried onClick={function(e){console.log('clicked')}} with no response from the console

import React, {Component} from 'react';
import './App.css';

class App extends Component {
  ClearNewNote = (e) => {
    e.target.style.backgroundColor = '#ccc';
  };
  render() {
    return(
      <div className="App">
        <header className="App-header">
          <h1>Simple Note Pad</h1>
        </header>
        <main>
          <div className="CreateNewNote">
            <div className="Controls">
              <button className="ClearNewNote">Clear</button>
              <button className="SaveNewNote" onClick={this.ClearNewNote.bind(this)}>Save</button>
            </div>
            <div className="NewNoteInput">
              <textarea></textarea>
            </div>
          </div>
        </main>
      </div>
    );
  };
}

export default App;

EDITS: Updated to in align with suggestions, no error codes and no changes when click

I've been clicking the wrong button, I don't know how long for — Luke Pring
– Luke Pring, Commented May 8, 2019 at 18:17

Murtaza Hussain · Accepted Answer · 2019-05-08 18:07:24Z

1

use arrow functions to use the this context fo the Component. and change currentTarget to target;

  ClearNewNote = (e) => {
    e.target.style.backgroundColor = '#ccc';
  };

edited May 8, 2019 at 18:07

answered May 8, 2019 at 17:54

Murtaza Hussain

4,3631 gold badge30 silver badges31 bronze badges

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

3 Comments

Luke Pring Over a year ago

no change I'm afraid. Have tried it before and after the class, inside and out

Murtaza Hussain Over a year ago

did you tried binding the ClearNewNote method in constructor and the using it ?

Murtaza Hussain Over a year ago

try now.. its changing the color of save button to #ccc

orvi · Accepted Answer · 2019-05-08 18:09:59Z

1

Check this one

import React, { Component } from "react";
import ReactDOM from "react-dom";

class App extends Component {
  ClearNewNote(e) {
    e.currentTarget.style.backgroundColor = "red";
  }

  render() {
    return (
      <div>
        <button onClick={this.ClearNewNote}>Click on me</button>
      </div>
    );
  }
}

export default App;

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

edited May 8, 2019 at 18:09

answered May 8, 2019 at 17:51

orvi

3,3501 gold badge25 silver badges37 bronze badges

1 Comment

Luke Pring Over a year ago

This works but I can't see the differences between that and my code

Collectives™ on Stack Overflow

React onclick listener

2 Answers 2

3 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Linked

Related