Number input in React web app displaying text but not numbers

Question

I'm currently building a very simple component with one input, where a User can type a number in.

However, the input has the following problems:

It doesn't display numbers when you type them in, but does letters
One number can get set in the state, but never more than one (so the typing is working)

I can't figure out what's wrong... It's a really straightforward component, and I've basically just copied/pasted across from other inputs.

Note - there's a componentDidMount in there, but I've taken it out for easier reading.

Any pointers would be appreciated.

Here's my component:

class Add extends Component {
  constructor(props) {
    super(props)

    this.state = {
      balance: '',
      add: '',

    }

    this.onChange = this.onChange.bind(this);
  }

    onChange = (e) => {
              this.setState({ [e.target.name]: e.target.value})
          }

  render() {

  const calculateUpdatedBalance = () => {
    return this.state.balance + this.state.add
  }

    return (
      <section className="edit-balance-section">
        <div className="edit-balance-container">

          <DashboardReturn />

          <div className="edit-balance-content">

            <p className="edit-balance-paragraph">How much would you like to add to your balance?</p>

            <div className="edit-balance-balance-container">
              <p className="edit-balance-balance-paragraph">Current Balance: </p>
              <span className="edit-balance-original">-£{this.state.balance}</span>
            </div>

            <div className="edit-balance-balance-container">
              <p className="edit-balance-balance-paragraph">Updated balance: </p>
              <span className="edit-balance-updated">-£{calculateUpdatedBalance()}</span>
            </div>

            <form>
            <input className="edit-balance-input" type="number" name="balance" value={this.state.add} onChange={this.onChange} step="0.01" />
            <button className="edit-balance-button" type="submit">Save</button>
            </form>
          </div>

        </div>
      </section>
    )
  }
}

export default Add

Naren · Accepted Answer · 2020-11-14 16:38:04Z

2

I found the issue, Actually you're setting input(name="balance") to this.state.balance and using this.state.add for value which always ''. You just need to change the name balance to add. Here's working in example with your code.

onChange = (e) => {
  this.setState({ [e.target.name]: e.target.value}) // e.target.name will be `balance or add`
}

  <input className="edit-balance-input" type="number" name="add"<-- here value={this.state.add} onChange={this.onChange} step="0.01" />

or 

 <input className="edit-balance-input" type="number" name="balance" value={this.state.balance} onChange={this.onChange} step="0.01" />

answered Nov 14, 2020 at 16:38

Naren

4,5293 gold badges20 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Number input in React web app displaying text but not numbers

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