ReactJS form rendering issue

Question

I'm learning reactjs and I have problem with my form.

I'm getting error from my console like this profile.js:54 Uncaught TypeError: Cannot read property 'target' of undefined when I reload my page. Form is not rendering in my page, but I think this code should work.

my file profile.js:

var BasicInput = React.createClass({
    render: function () {
        return (
            <input type="text" onChange={this.props.valChange} value={ this.props.val} />
        );
    }
});

var BasicForm = React.createClass({
    getInitialState: function(){
      return {
          firstName: '',
          lastName: ''
      };
    },

    submit: function (e){
      var self;

      e.preventDefault()
      self = this;

      console.log(this.state);

      var data = {
        firstName: this.state.firstName,
        lastName: this.state.lastName
      };

      // Submit form via jQuery/AJAX
      $.ajax({
        type: 'POST',
        url: '/accounts/profile/details-form',
        data: data
      })
      .done(function(data) {
        self.clearForm()
      })
      .fail(function(jqXhr) {
        console.log('failed to change basic info');
      });

    },

    clearForm: function() {
      this.setState({
        firstName: "",
        lastName: ""
      });
    },

    firstnameChange: function(e){
      this.setState({firstName: e.target.value});
    },

    lastnameChange: function(e){
     this.setState({lastName: e.target.value});
    },

    render: function() {
        return (
            <form onSubmit={this.submit}>
                <div className="form-half">
                    <BasicInput label="Firstname" valChange={this.firstnameChange()} val={this.state.firstName}/>
                </div>
                <div className="form-half">
                    <BasicInput label="Lastname" valChange={this.lastnameChange()} val={this.state.lastName}/>
                </div>
                 <button type="submit">Submit</button>
            </form>
        );
    }
});


ReactDOM.render(
    <BasicForm />,
    document.getElementById('basicInfoForm')
  );

What is wrong in this code?

Many thanks for help with this problem.

Oleksandr T. · Accepted Answer · 2016-08-29 09:16:05Z

2

You should pass reference to functions firstnameChange and lastnameChange but not call them (remove () from each of them)

<BasicInput 
  label="Firstname" 
  valChange={ this.firstnameChange } 
  val={ this.state.firstName }
/>

<BasicInput 
  label="Lastname" 
  valChange={ this.lastnameChange } 
  val={ this.state.lastName }
/>

Example

answered Aug 29, 2016 at 9:16

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS form rendering issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related