Question

4

Uncaught TypeError: Cannot read property 'value' of undefined in REACT JS

rated 0 times [ 8] [ 4] / answers: 1 / hits: 38057 / 8 Years ago, fri, december 9, 2016, 12:00:00

I am creating a login form using REACT JS as front-end and PHP as back-end. I am trying to get input values. Code is as below:

import React, { Component} from 'react';

import ReactDOM from 'react-dom';

import {Button, IconButton} from 'react-toolbox/lib/button';

import Input from 'react-toolbox/lib/input';



export default class Login extends React.Component {



constructor() {

    super();

    this.state = {email: ''};

    this.state = {password: ''};

    this.onSubmit = this.onSubmit.bind(this);

    this.handleEmailChange = this.handleEmailChange.bind(this);

    this.handlePasswordChange = this.handlePasswordChange.bind(this);

}

handleEmailChange(e) {

    this.setState({email: e.target.value});

}

handlePasswordChange(e) {

    this.setState({password: e.target.value});

}

onSubmit() {

    fetch('http://xyz/check-login', {

      method: 'POST',

      headers: {

        'Accept': 'application/json',

        'Content-Type': 'application/json',

      },

      body: JSON.stringify({

        email: this.state.email,

        password: this.state.password,

      })

    })

}

And form is as below:

<form name=Login>

<Input type=text name=email value={this.state.email} placeholder=Email Id className=form-control onChange={this.handleEmailChange} />

<Input name=password value={this.state.password} placeholder=Password type=password className=form-control m-b-10 onChange={this.handlePasswordChange} />   

<Button type=button className=m-t-20 orange label=Sign in  onClick={this.onSubmit} /> 

</form>

But getting the following error:

Uncaught TypeError: Cannot read property 'value' of undefined

I am using react-toolbox. So, I am using component from https://github.com/react-toolbox/react-toolbox/blob/dev/components/input/Input.js and component from https://github.com/react-toolbox/react-toolbox/blob/dev/components/button/Button.js.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jordenfabiand

Add To Favorites

Follow

Total Points: 678

Total Questions: 107

Total Answers: 95

Location: Western Sahara

Member since Mon, May 3, 2021

3 Years ago

answered 8 Years ago josuea · Accepted Answer

First of all, what are <Input ..../> and <Button .../>? Are they your components or they are only form input fields?

I suppose that they are only form fields, thus they need to be in lower case <input ..../> , <button .../>.

Try to bind your functions inside render, like : this.functionName.bind(this).

This is a working code :

class Test extends React.Component {

    constructor(props){

        super(props);



      this.state = {

          email: '',

          password: '',

      };

    }



    handleEmailChange(e) {

        this.setState({email: e.target.value});

    }

    handlePasswordChange(e) {

        this.setState({password: e.target.value});

    }





    render(){

        return (

        <div>

            <form name=Login>

              <input type=text name=email value={this.state.email} placeholder=Email Id className=form-control onChange={this.handleEmailChange.bind(this)} />

              <input name=password value={this.state.password} placeholder=Password type=password className=form-control m-b-10 onChange={this.handlePasswordChange.bind(this)} />   

              <button type=button className=m-t-20 orange label=Sign in  onClick={this.onSubmit}>Sign in</button> 

          </form>

        </div>

      )

    }

}



React.render(<Test />, document.getElementById('container'));

Here is the fiddle.

UPDATE

I tested it here :

 constructor(props){

    super(props);



    this.state = {

            name: '',

        email: ''

    }

  }



  handleChange(name, value){

    let state = this.state;

    state[name] = value;

    this.setState({state});



  }



  render () {

    return (

      <section>

        <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />

        <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />

      </section>

    );

  }

I'm not sure how it works, but it pass name and value as params to the handleChange function, thus, you can get value as a second param. You don't need event.