onClick event is not firing for a button component

help
1

Hi,
I am new to Meteor so please bear with me. I have a button component for which, onClick event is not firing. Here is my code.

First the container for the component “DisplayButton”

import React, {Component, PropTypes} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
import ReactDOM from 'react-dom';

import DisplayButton from './DisplayButton.jsx';

class ComponentTrial extends Component {

  toggleDisplay(e) {
    console.log("Let's toggle the display");
  }

  render() {
    <div className="ComponentTrialContainer">
      <DisplayButton onClick={this.toggleDisplay.bind(this)} /> 
    </div>
  }
}

export default createContainer(() => {
  return {
    currentUser: Meteor.userId(),
  };
}, DisplayButton);

Now the code for the component “DisplayButton”

import React, {Component, PropTypes} from 'react';
import {createContainer} from 'meteor/react-meteor-data';

class DisplayButton extends Component {
  render() {
    return(
      <button type="button" className="toggleDislpayButton"> Display </button>
    );
  }
};

DisplayButton.propTypes = {
  currentUser: PropTypes.string,
  displayStatus: PropTypes.bool,
};

export default createContainer(() => {
  return {
    currentUser: Meteor.userId(),
  };
}, DisplayButton);

The button itself is rendered correctly. However, I don’t see any output on console after I click the button. What is wrong with the code. BTW, I am using Safari as well as Chrome and it doesn’t work in either of the two browsers.

Thanks
Sudheer

2

I’m not a React programmer, but shoudn’t your onClick code be in the button component not the container?

3

In react you usually have containers that call your components. Its good practice for all your state to come from the container and get passed down to your components. In this case we have a container ( CompoenentTrial ) thats calling DisplayButton compoenent and passing it a click handleer (toggleDisplay).

Container

import React, {Component, PropTypes} from 'react';
import {createContainer} from 'meteor/react-meteor-data';
import ReactDOM from 'react-dom';

import DisplayButton from './DisplayButton.jsx';

class ComponentTrial extends Component {

  toggleDisplay(e) {
    console.log("Let's toggle the display");
  }

  render() {
    <div className="ComponentTrialContainer">
      <DisplayButton handleClick={this.toggleDisplay.bind(this)} />
    </div>
  }
}

export default createContainer(() => {
  return {
    currentUser: Meteor.userId(),
  };
}, ComponentTrial);

Component

import React, {Component, PropTypes} from 'react';

// Stateless function to return a buton rather than a class
export default function DisplayButton(props) {
  // It takes in props, props are anything you want to pass down in this case the click event handler that we named handleClick
    return(
      <button type="button" onClick={props.handleClick.bind(this)} className="toggleDislpayButton"> Display </button>
    );
};
4

Thanks “djtouchette”. That worked like a charm.

Sudheer

1 Like