I'm having troubles making this code work. When i click on the button, the ponent should re render and bee a h1 tag. This code piles, the problem is that when I click the button "Open Modal" nothing happens.

This is the last version i have.I'm fairly new to react.js so apologies in advance for my ignorance. Any ideas?

class AddTransactionForm extends React.Component {

      constructor (props) {
        super(props);
        this.state = { modalActive: false };
        this.openModal = this.openModal.bind(this);
      }

      openModal () {
        this.setState({ modalActive: true })
      }

      render () {
        if (this.state.modalActive){
          return(<h1>Active</h1>);
        }else{
          return (
                 <div>
                       <button className="button_" onClick={this.openModal}>Open modal</button>
                 </div>
        );
        }
    }
    }

Aditionaly, im getting this error in the console (although the error, the page renders and it's working fine)

Uncaught Error: Cannot find module "./ponents/Transactions" at bundle.js:17 at Object. (bundle.js:17) at t (bundle.js:1) at Object. (bundle.js:17) at t (bundle.js:1) at Object. (bundle.js:1) at t (bundle.js:1) at bundle.js:1 at bundle.js:1

I'm having troubles making this code work. When i click on the button, the ponent should re render and bee a h1 tag. This code piles, the problem is that when I click the button "Open Modal" nothing happens.

This is the last version i have.I'm fairly new to react.js so apologies in advance for my ignorance. Any ideas?

class AddTransactionForm extends React.Component {

      constructor (props) {
        super(props);
        this.state = { modalActive: false };
        this.openModal = this.openModal.bind(this);
      }

      openModal () {
        this.setState({ modalActive: true })
      }

      render () {
        if (this.state.modalActive){
          return(<h1>Active</h1>);
        }else{
          return (
                 <div>
                       <button className="button_" onClick={this.openModal}>Open modal</button>
                 </div>
        );
        }
    }
    }

Aditionaly, im getting this error in the console (although the error, the page renders and it's working fine)

Uncaught Error: Cannot find module "./ponents/Transactions" at bundle.js:17 at Object. (bundle.js:17) at t (bundle.js:1) at Object. (bundle.js:17) at t (bundle.js:1) at Object. (bundle.js:1) at t (bundle.js:1) at bundle.js:1 at bundle.js:1

• javascript
• jquery
• reactjs
• react-router

• Have you checked by inspecting the html dom ? – Prasanna Mahendiran Commented Jan 4, 2017 at 16:56
• Should work. Something else is broken. – Sergiu Paraschiv Commented Jan 4, 2017 at 16:58
• Try wrapping your <h1> in a <div>. – jmargolisvt Commented Jan 4, 2017 at 17:00
• @jmargolisvt why would that matter? – Martin Dawson Commented Jan 4, 2017 at 17:03
• @SergiuParaschiv where should i look for errors? – jmo66 Commented Jan 4, 2017 at 17:16

1 Answer 1

This works perfectly fine. See the demo at http://codepen.io/umgupta/pen/dNPPXe Looking at the error it seems like you are using a bundler. The issue might be that since the error might be throwing before the events bind, on click didn't bind.

class AddTransactionForm extends React.Component {

      constructor (props) {
        super(props);
        this.state = { modalActive: false };
        this.openModal = this.openModal.bind(this);
      }

      openModal () {
        this.setState({ modalActive: true })
      }

      render () {
        if (this.state.modalActive){
          return(<h1>Active</h1>);
        }else{
          return (
                 <div>
                       <button className="button_" onClick={this.openModal}>Open modal</button>
                 </div>
        );
        }
    }
    }


ReactDOM.render(
  <AddTransactionForm/>,
  document.getElementById('root')
);