React - onClick method not firing


#1

I have an “export default” statement in addition to “class LikeButton”

export default class AppHeader extends React.Component {
  constructor() {
    super();
    this.state = {
      liked: false
    };
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState({liked: !this.state.liked});
  }
  render() {
    const text = this.state.liked ? 'liked' : 'haven\'t liked';
    return (
      <div onClick={this.handleClick}>
        You {text} this. Click to toggle.
      </div>
    );
  }
}

but the body of the component is copied in from the api samples and still I do not see any event triggered nor function called.

AppHeader class being a child of a component hierarchy - could it be events are not passed down into the hierarchy.

Thank you for any help
jav99


#2

Your missing the onClick={this.handleClick} in the render function from the example you linked to.


#3

right, but when I press edit in the editor in here…

  <div onClick={this.handleClick}>
    You {text} this. Click to toggle.
  </div>

is here… sorry must be a formatting error here…

any more ideas?


#4

So hard to read… Enclose your code block inside triple quotes, like:

code
`` ` (without the extra space)


#5

Your example are working here, fwiw.


#6

@rhjulskov : thx for confirming this.

How could I proceed in finding the cause /debug code?


#7

You probably have a click event handler further up the DOM that is calling something like event.stopPropagation()


#8

apparently

event.preventDefault();

fixed my issue…

logOut(event) {
      event.preventDefault();
      Meteor.logout(() => {
        browserHistory.push('/login');
      });
    }