CODEWITHSUNDEEP
reactjsmongodbapimongoose
Aboli Rode
Aboli Rode

Reputation: 23

Not able to read values from form React JS

The below code is written to get the value from the code and send it to the API, but values are undefined

class Register extends Component{
    constructor(){
        super()
        this.state= {
            Name: '',
            Email: '',
            Password:'',
        }
        this.onChange = this.onChange.bind(this)
        this.onSubmit = this.onSubmit.bind(this)
    }
    onChange(e){
       
        this.setState({[e.target.name]: e.target.value})
    }
    onSubmit(e){
        e.preventDefault()

        const user = {
            Name: this.state.name,
            Email: this.state.email,
            Password: this.state.password
        }
        console.log(this.state.value); // returns undefined
        register(user).then(res => {
            console.log(res);
            if(res) {
                this.props.history.push('/login')
            }
        })
    }

the values fetched from the forms are undefined, how to resolve this issue?

Upvotes: 0

Views: 181

Answers (1)

Danila
Danila

Reputation: 18536

JavaScript is a case-sensitive language. This means that the language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters.

In your state you have capitalized names:

        this.state= {
            Name: '',
            Email: '',
            Password:'',
        }

But inside onSubmit you use lowercased names:

        const user = {
            Name: this.state.name, // should be -> Name: this.state.Name
            Email: this.state.email, // same here
            Password: this.state.password // same here
        }

You need to be consistent and use same capitalization in both places. Usually in JS it is lowercased (or if more specific - camelCased) names for everything expect classes and constructor functions.

Upvotes: 1

Related Questions