I'm just starting my adventure in react.
I just want to do the number validation.
I found many solutions but none work. from here I took the solution Only numbers. Input number in React
I don't know further this is happening
this is the code with the added solution I found.
import React, { Component } from 'react';
import validator from 'validator';
export default class GetApp extends Component {
state = {
// creditId: '',
err: false,
name: '',
firstName: '',
lastName: '',
pesel: '',
productName: '',
value: ''
}
constructor(props) {
super(props);
this.state = {
creditId: ''
}
}
onChange = (e) => {
//this.setState({ creditId: e.target.value });
}
handleChange(evt) {
const creditId = (evt.target.validity.valid) ? evt.target.value : this.state.creditId;
this.setState({ creditId });
}
handleSubmit = event => {
event.preventDefault();
fetch(`http://localhost:8200/credit/getCredit/${this.state.creditId}`)
.then(res => {
if (res.ok) {
return res
}
}).then(res => res.json())
.then(data => {
this.setState({
err: false,
name: data.credit.name,
firstName: data.customer.firstName,
lastName: data.customer.lastName,
pesel: data.customer.pesel,
productName: data.product.productName,
value: data.product.value
})
})
.catch(err => {
console.log(err);
this.setState({
err: true
})
})
}
render() {
let content = null;
if (!this.state.err && this.state.creditId) {
content = (
<div>
<p>Name: {this.state.name}</p>
<p>First Name: {this.state.firstName}</p>
<p>Last Name: {this.state.lastName}</p>
<p>PESEL: {this.state.pesel}</p>
<p>Product Name: {this.state.productName}</p>
<p>Value: {this.state.value}</p>
</div>
)
}
return (
<form onSubmit={this.handleSubmit}>
<div className="container">
<h2>Get Credit</h2>
<label>Credit Number:</label>
<input type='text' name="creditId" value={this.state.creditId} pattern="[0-9]*" onInput={this.handleChange.bind(this)} />
<div>
<button type="submit">Submit</button>
<p>{this.state.err ? `Dont search: ${this.state.creditId}` : content}</p>
<div>
</div>
</div>
</div>
</form>
)
}
}
Thanks for help
