CODEWITHSUNDEEP
javascriptreactjs
Ashish
Ashish

Reputation: 429

input form sending blank value in reactjs

i am trying to console.log the input value using react. below is the code i have written 

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
  constructor() {
    super();
    this.processHand = this.processHand.bind(this);

  }

  processHand(e){
    e.preventDefault();
    const handMoneyReceived = this.handMoney.value;
    console.log(handMoneyReceived);

  }

  render(){
    return(
        <div>
          <form onSubmit = {this.processHand}>
            <input type="text"/>
            <input type="submit" ref= {ref => this.handMoney = ref}/>
          </form>
        </div>
      )
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

the console.log(handMoneyReceived) is logging out blank value instead of value entered on the form.

Upvotes: 0

Views: 53

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104499

Because you used ref on wrong field, use it with text field, try this:

<input type="text" ref= {ref => this.handMoney = ref}/>

Check the working fiddle: https://jsfiddle.net/mayankshukla5031/k1efLh8e/

Upvotes: 2

Related Questions