For the past hour, I have been trying to get this to work. onClick on any of the buttons is not working at all… What am I doing wrong?

const React = require('react');

class Questionnaire extends React.Component {
constructor (props) {
    super(props);
    this.state = { selectedSection: 0 };
}

selectSection (e) {
    console.log(e);
}

render () {
    return (
        <div>
            <div className='btn-group mr-2' role='group'>
                <button className='btn btn-primary' onClick={this.selectSection}>A</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>B</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>C</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>D</button>
          </div>
        </div>
    );
}
}

 module.exports = Questionnaire;

I should mention that I am using it with express-react-views

For the past hour, I have been trying to get this to work. onClick on any of the buttons is not working at all… What am I doing wrong?

const React = require('react');

class Questionnaire extends React.Component {
constructor (props) {
    super(props);
    this.state = { selectedSection: 0 };
}

selectSection (e) {
    console.log(e);
}

render () {
    return (
        <div>
            <div className='btn-group mr-2' role='group'>
                <button className='btn btn-primary' onClick={this.selectSection}>A</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>B</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>C</button>
                <button className='btn btn-secondary' onClick={this.selectSection}>D</button>
          </div>
        </div>
    );
}
}

 module.exports = Questionnaire;

I should mention that I am using it with express-react-views

• javascript
• node.js
• reactjs

Share Improve this question Follow edited Aug 14, 2017 at 16:56 Navarjun asked Aug 14, 2017 at 16:49 NavarjunNavarjun 6111 gold badge11 silver badge1010 bronze badges 6

• 1 Are there any console errors? – Sumner Evans Commented Aug 14, 2017 at 16:51
• No console errors – Navarjun Commented Aug 14, 2017 at 16:52
• 1 The code seems to be working fine for me. Nothing's showing up on your end? – Iruss Commented Aug 14, 2017 at 16:54
• Yeah! No logs when I click on any of the buttons. – Navarjun Commented Aug 14, 2017 at 16:55
• 1 From express-react-views readme: "It renders static markup and does not support mounting those views on the client." github./reactjs/express-react-views/issues/59 – CD.. Commented Aug 14, 2017 at 16:58

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 1

You need to bind the function to the ponent like so:

class Questionnaire extends React.Component {
    constructor (props) {
        super(props);
        this.state = { selectedSection: 0 };

        this.selectSection = this.selectSection.bind(this)
    }

Keep everything else the same

Try This

    const React = require('react');

    class Questionnaire extends React.Component {
    constructor (props) {
        super(props);
        this.state = { selectedSection: 0 };
    }

    selectSection = function(e){
    console.log(e);
  }

    render () {
        return (
            <div>
                <div className='btn-group mr-2' role='group'>
                    <button className='btn btn-primary' onClick={this.selectSection}>A</button>
                    <button className='btn btn-secondary' onClick={this.selectSection}>B</button>
                    <button className='btn btn-secondary' onClick={this.selectSection}>C</button>
                    <button className='btn btn-secondary' onClick={this.selectSection}>D</button>
              </div>
            </div>
        );
    }
    }

You need to bind the method to the class. Add this line to the constructor:

this.selectSection = this.selectSection.bind(this);