React - onClick method not firing

help
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>
    );
  }
}

https://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html

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');
      });
    }