We Keep Coding

cant reset input in functional component in react js

i have a function component called TextInput and return an input element:
function TextInput({ type = "text", label, name, required = false }) {
const [value, setValue] = useState("");
function handleChange(e) {
setValue(e.target.value);
}
return (
<div className={styles.footerFormInput}>
<input
type={type}
value={value}
onChange={handleChange}
name={name}
required={required}
/>
<label className={value && styles.filled} htmlFor={name}>
{label}
</label>
</div>
);
}
i am trying to reset the form, but the value doesnt reset on Customized TextInput but yes on normal/original input element.
this is my page code:
const form = useRef();
const sendEmail = (e) => {
e.preventDefault();
const inputData = e.target.elements;
if (inputData.from_email) {
if (validator.isEmail(inputData.from_email.value)) {
console.log("valid email");
} else {
// alert("Enter valid Email!");
//email error..
return;
}
}
if (inputData.full_name) {
if (
validator.isAlpha(inputData.full_name.value, ["he"], {
ignore: " ",
}) ||
validator.isAlpha(inputData.full_name.value, ["en-US"], {
ignore: " ",
})
) {
console.log("valid name");
} else {
//name error
return;
}
}
if (inputData.phone && inputData.phone.value.trim() !== "") {
if (validator.isMobilePhone(inputData.phone.value, ["he-US"])) {
console.log("valid phone");
} else {
//phone error
return;
}
}
emailjs
.sendForm(
process.env.EMAILJS_SERVICE_ID,
process.env.EMAILJS_TEMPLATE_ID,
form.current,
process.env.EMAILJS_USER_ID
)
.then(
(result) => {
//do something with success
...
form.current.reset(); //not working!!!!!!
},
(error) => {
//do something with error
}
);
};
return (
...
<form ref={form} onSubmit={sendEmail}>
<div className={styles.footerFormRow}>
<TextInput
type="input"
label='דוא"ל'
name="from_email"
/>
<TextInput
type="input"
label="שם מלא"
name="full_name"
/>
<input type="text" name="somename" />
</div>
</form>
...
)
only the somename input is reset, the others in the functional component no.
any hepl?

I am making a real time betting app and My redux state is updating but my ui is not affecting Can anyone help me with the code

I am developing real time sportsbook using MERN stack and redis as memory db.. Everything seems right except react-redux not passing state to components as they are updated. I can see the nextstate clearly getting latest data in the console/ redux logger..
Here is the component reducer file..
import ActionTypes from './betslip.types';
import { calculateTotalReturn } from './betslip.utils';
const INITIAL_STATE = {
bets: [],
updateBet: true,
updatedGame: true,
betType:'single',
totalStake:0,
singleTotalReturn:0,
multiTotalReturn:0,
systemTotalReturn:0
}
export const betslipReducer = (state = INITIAL_STATE, action) => {
switch(action.type) {
case ActionTypes.SET_UPDATE_BET:
return {
...state,
updateBet: action.value
};
case ActionTypes.SET_BET_TYPE:
return {
...state,
betType: action.value
};
case ActionTypes.UPDATED_GAMES:
return {
...state,
updatedGame: !state.updatedGame
};
case ActionTypes.SET_TOTAL_STAKE:
return {
...state,
totalStake: action.value
};
case ActionTypes.PUT_BET:
return {
...state,
bets: [action.value, ...state.bets]
};
case ActionTypes.UPDATE_BET_ODD:
var betsOddsCopy = state.bets;
var indexOdds = betsOddsCopy.findIndex(n => n._id === action.betId);
betsOddsCopy[indexOdds].odds = action.value;
return {
...state,
bets: betsOddsCopy
};
case ActionTypes.UPDATE_BET_STAKE:
var betsStakeCopy = state.bets;
var indexStake = betsStakeCopy.findIndex(n => n._id === action.betId);
betsStakeCopy[indexStake].stake = action.value;
return {
...state,
bets: betsStakeCopy
};
case ActionTypes.DELETE_BET:
var betsCopy = state.bets;
const newBets = betsCopy.filter(b => b._id != action.betId)
return {
...state,
bets: newBets
};
case ActionTypes.CALCULATE_TOTAL_RETURN:
return calculateTotalReturn(state);
default:
return state;
}
}
The bets property in this file is not updating but betslip.bets is updating
import React, { useState } from 'react';
import { connect } from 'react-redux';
import { setUpdateBet, calculateTotalReturn, setBetType, setTotalStake, updateBetStake } from '../../redux/betslip/betslip.actions';
import Bet from '../bet/bet.component';
import './BetSlip.css';
//bets, updateBet, betType, totalStake, singleTotalReturn, multiTotalReturn, systemTotalReturn,
const BetSlip = ({bets, updateBet, betType, totalStake, singleTotalReturn, multiTotalReturn, systemTotalReturn, setUpdateBet, setBetType, setBetStake, setTotalStake, calculateTotalReturn }) => {
//const bets = store.getState().betslip.bets;
//console.log(betslip);
const [collapsed, setCollapsed] = useState(bets.length > 1 ? true : false);
const handleStakeTypeChange = (e) => {
if(e.target.dataset.type == 'multi' && bets.length > 8){
return;
} else if(e.target.dataset.type == 'system' && bets.length != 3){
return;
}
setBetType(e.target.dataset.type)
calculateTotalReturn();
}
const handleOpen = () => {
setCollapsed(!collapsed);
}
const handleUpdateBet = (e) => {
if(e.target.checked){
setUpdateBet(true);
} else{
setUpdateBet(false);
}
}
const handleStakeChange = (e) => {
if(betType == 'single'){
setBetStake(bets[0]._id, e.target.value)
calculateTotalReturn();
} else {
setTotalStake(e.target.value);
calculateTotalReturn();
}
//console.logbets);
}
React.useEffect(() => {
console.log('bet changed')
if(bets.length <= 1){
setBetType('single')
calculateTotalReturn();
}
calculateTotalReturn();
},[bets]);
// setInterval(() => {
// var total = 0;
// bets.forEach(bet => {
// total =+ bet.stake;
// })
// setTotalBetPrice(total);
// }, 5000);
var totalOdds;
if(betType == 'single'){
totalOdds = 0;
bets.forEach(bet => {
if( bet.odds != 'suspended'){
totalOdds += bet.odds;
}
//console.log('Hii');
})
} else if(betType == 'multi'){
totalOdds = 1;
bets.forEach(bet => {
if( bet.odds != 'suspended'){
totalOdds *= parseFloat(bet.odds);
}
})
} else {
totalOdds = 0;
}
//console.log(updatedGames)
return <div className='betslip__container'>
<div className='betslip__badge' onClick={handleOpen}>
<span>Bet Slip ({bets.length})</span>
{collapsed ? <span><i className="fa fa-chevron-up" /></span> : <span><i className="fa fa-chevron-down" /></span>}
</div>
{(collapsed == false && bets.length > 1) && <div className='betslip__stakeType'>
<div className={`betslip__stakeType__item ${betType == 'single' && "active"}`} onClick={handleStakeTypeChange} data-type='single'>
Single
</div>
{bets.length < 9 && <div className={`betslip__stakeType__item ${betType == 'multi' && "active"}`} onClick={handleStakeTypeChange} data-type='multi'>
Multi/Parlay
</div>}
{bets.length == 3 && <div className={`betslip__stakeType__item ${betType == 'system' && "active"}`} onClick={handleStakeTypeChange} data-type='system'>
System 2/3
</div>}
</div> }
<div className='betslip__body__container'>
{
collapsed == false && bets.map(bet => (
<Bet
key={bet._id}
id={bet._id}
title={bet.optionName}
odds={bet.odds} category={bet.category}
teams={bet.teams}
stake={bet.stake}
stakeType={betType} />
))
}
</div>
{!collapsed && <div className="betslip__footer">
{((betType == 'multi' || betType == 'system') || bets.length < 2) && <div className="betslip__stake">
<input type='number' className='betslip__stake__input' placeholder='Stake' value={betType == 'single' ? (bets[0].stake > 0 ? bets[0].stake : '') : (totalStake > 0 ? totalStake : '')} onChange={handleStakeChange} />
</div>}
<button className="betslip__btn__saving">
<span className="betslip__btn__saving__text">Place Bet</span>
<span className='totals'>
<span className='totals__text'>
Total Odds: {parseFloat(totalOdds).toFixed(3)}
</span>
{betType == 'single' && <span>Total Return: {singleTotalReturn > 0 ? parseFloat(singleTotalReturn).toFixed(2) : singleTotalReturn}</span>}
{betType == 'multi' && <span>Total Return: {multiTotalReturn > 0 ? parseFloat(multiTotalReturn).toFixed(2) : multiTotalReturn}</span>}
{betType == 'system' && <span>Total Return: {systemTotalReturn > 0 ? parseFloat(systemTotalReturn).toFixed(2) : systemTotalReturn}</span>}
</span>
</button>
</div>}
{!collapsed && <div className='betslip__badge'>
<div className="form-check">
{updateBet
?
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" onClick={handleUpdateBet} defaultChecked />
:
<input className="form-check-input" type="checkbox" value="" id="flexCheckDefault" onClick={handleUpdateBet} />
}
<label className="form-check-label" htmlFor="flexCheckDefault">
Accept Change
</label>
</div>
</div>}
</div>
}
const mapStateToProps = state => ({
betType: state.betslip.betType,
updateBet: state.betslip.updateBet,
totalStake: state.betslip.totalStake,
singleTotalReturn: state.betslip.singleTotalReturn,
multiTotalReturn: state.betslip.multiTotalReturn,
systemTotalReturn: state.betslip.systemTotalReturn,
bets: state.betslip.bets
})
const mapDispatchToProps = dispatch => ({
setUpdateBet: value => dispatch(setUpdateBet(value)),
setBetType: value => dispatch(setBetType(value)),
setTotalStake: value => dispatch(setTotalStake(value)),
setBetStake: (id, value) => dispatch(updateBetStake(id, value)),
calculateTotalReturn: () => dispatch(calculateTotalReturn())
})
export default connect(mapStateToProps, mapDispatchToProps)(BetSlip);

Validation check in reactjs issue

Why I am not able to see validation alert clicking on the done button when everything is empty once form open even validation checks are proper ?
Basically form opens i don't type anything and click on done button so all validation checks should work and show text 'Required.Please enter your given name.' but it is not showing ?
Where is the issue which causes the state to be blank at the end
const addSecondaryContact = inject('apptContacts')(observer((props) => {
const {
i18n, nbnContact, apptContacts, backButtonContent,
} = props;
const { updatePrimaryContact } = apptContacts;
const CMS = i18n.appointmentManager.editAppointmentContact;
const [state, setState] = useState({
data: {
firstName: '',
lastName: '',
number: '',
},
firstNameValid: '',
lastNameValid: '',
numberValid: '',
});
const validFirstName = () => {
console.log(state.data.firstName);
if (!state.data.firstName) {
console.log('frstname1');
return 'Required.Please enter your given name.';
}
if (!/^[A-Za-z]+$/.test(state.data.firstName)) {
console.log('frstname2');
return 'Invalid entry.Please use letters only.';
} if (state.data.firstName.length === 1) {
console.log('frstname3');
return 'Invalid entry.More than one character is required';
}
console.log('&&&&');
return '';
};
const validLastName = () => {
console.log('988');
if (!state.data.lastName) { console.log('lastname'); return 'Required.Please enter your given name.'; }
if (!/^[A-Za-z]+$/.test(state.data.lastName)) {
return 'Invalid entry.Please use letters only.';
} if (state.data.lastName.length === 1) {
return 'Invalid entry.More than one character is required';
}
return '';
};
const validNumber = async () => {
console.log('777');
if (!state.data.number) { return 'Required.Please enter your mobile number.'; }
if (state.data.number.substr(0, 2) !== '04') {
return 'Invalid entry.Please enter your 10-digit mobile number starting with 04.';
} if (state.data.number.length !== 10) {
return 'Invalid entry.Please enter your 10-digit mobile number starting with 04.';
} if (state.data.number.length === 1) {
return 'Invalid entry.More than one number is required';
}
return '';
};
const valid = async () => {
console.log('milan');
setState({
...state,
firstNameValid: validFirstName(),
lastNameValid: validLastName(),
numberValid: validNumber(),
});
console.log(state.firstNameValid);
console.log(state.lastNameValid);
console.log(state.numberValid);
};
const handleTextareaChange = (event) => {
console.log('%%%');
const { data } = state;
data[event.target.name] = event.target.value;
setState({
...state,
data,
});
valid();
};
const saveButton = async () => {
console.log(state);
await valid();
if (valid()) {
console.log(state.firstNameValid);
console.log(state.lastNameValid);
console.log(state.numberValid);
if (!state.firstNameValid && !state.lastNameValid && !state.numberValid) {
const personName = `${state.data.firstName} ${state.data.lastName}`;
const primaryContact = {
name: personName,
phoneNumber: state.data.number,
// updatePrimaryContact(primaryContact)
};
// updatePrimaryContact(primaryContact)
backButtonContent();
}
}
};
return (
<div>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
<h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
{CMS.heading2}
</h1>
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="givenName" name="firstName" label={CMS.name} onChange={handleTextareaChange} value={state.data.firstName} />
{state.firstNameValid && (
<Alert variant="error" inline>
<p>
{state.firstNameValid}
</p>
</Alert>
)}
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="familyName" name="lastName" label={CMS.familyName} onChange={handleTextareaChange} value={state.data.lastName} />
{state.lastNameValid && (
<Alert variant="error" inline>
<p>
{state.lastNameValid}
</p>
</Alert>
)}
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing3x} />
<TextField id="mobileNumber" name="number" label={CMS.mobile} onChange={handleTextareaChange} value={state.data.number} />
{state.numberValid && (
<Alert variant="error" inline>
<p>
{state.numberValid}
</p>
</Alert>
)}
<VerticalSpacing size={ABLE_SPACING_SIZE.spacing4x} />
<ActionButton className={styles.saveCta} variant="HighEmphasis" label={CMS.saveCTA} onClick={() => saveButton()} />
</div>
);
}));
export default addSecondaryContact;

You had two main issues:
you state update is not proper - you set state on multiple occasions
you had async in your validNumber method - which causes blank output
Here is the code i modify from your code - maybe it can help you. I removed extra components in order to remove dependencies and used only plain html.
Demo: https://codesandbox.io/s/upbeat-feynman-w3odj?file=/App.js
import "./styles.css";
import React from "react";
export default function App() {
const [state, setState] = React.useState({
data: {
firstName: "",
lastName: "",
number: ""
},
firstNameValid: "",
lastNameValid: "",
numberValid: ""
});
const validFirstName = () => {
console.log(state.data.firstName);
let result = "";
if (!state.data.firstName) {
console.log("frstname1");
result = "Required.Please enter your given name.";
}
if (!/^[A-Za-z]+$/.test(state.data.firstName)) {
console.log("frstname2");
result = "Invalid entry.Please use letters only.";
}
if (state.data.firstName.length === 1) {
console.log("frstname3");
result = "Invalid entry.More than one character is required";
}
console.log("&&&&");
return result;
};
const validLastName = () => {
console.log("988");
if (!state.data.lastName) {
console.log("lastname");
return "Required.Please enter your given name.";
}
if (!/^[A-Za-z]+$/.test(state.data.lastName)) {
return "Invalid entry.Please use letters only.";
}
if (state.data.lastName.length === 1) {
return "Invalid entry.More than one character is required";
}
return "";
};
const validNumber = () => {
console.log("777");
if (!state.data.number) {
return "Required.Please enter your mobile number.";
}
if (state.data.number.substr(0, 2) !== "04") {
return "Invalid entry.Please enter your 10-digit mobile number starting with 04.";
}
if (state.data.number.length !== 10) {
return "Invalid entry.Please enter your 10-digit mobile number starting with 04.";
}
if (state.data.number.length === 1) {
return "Invalid entry.More than one number is required";
}
return "";
};
const valid = async () => {
console.log("milan");
setState({
...state,
firstNameValid: validFirstName(),
lastNameValid: validLastName(),
numberValid: validNumber()
});
console.log(state.firstNameValid);
console.log(state.lastNameValid);
console.log(state.numberValid);
};
const handleTextareaChange = (event) => {
let validRes = "";
let key = "";
if (event.target.name === "firstName") {
validRes = validFirstName();
key = "firstNameValid";
}
if (event.target.name === "lastName") {
validRes = validLastName();
key = "firstNameValid";
}
if (event.target.name === "number") {
validRes = validNumber();
key = "numberValid";
}
console.log("234", validRes);
setState({
...state,
data: { ...state.data, [event.target.name]: event.target.value },
// [key]:
firstNameValid: validFirstName(),
lastNameValid: validLastName(),
numberValid: validNumber()
});
// valid();
};
const saveButton = async () => {
console.log(state);
await valid();
if (valid()) {
console.log(state.firstNameValid);
console.log(state.lastNameValid);
console.log(state.numberValid);
}
};
return (
<div>
<h1 tabIndex="-1" className="HeadingB mt-sheet-heading">
'CMS.heading2'
</h1>
<input
type="text"
id="givenName"
name="firstName"
label="CMS.name"
onChange={handleTextareaChange}
value={state.data.firstName}
/>
{state.firstNameValid && <p>{state.firstNameValid}</p>}
<input
type="text"
id="familyName"
name="lastName"
label="CMS.familyName"
onChange={handleTextareaChange}
value={state.data.lastName}
/>
{state.lastNameValid && <p>{state.lastNameValid}</p>}
<input
type="text"
id="mobileNumber"
name="number"
label="CMS.mobile"
onChange={handleTextareaChange}
value={state.data.number}
/>
{state.numberValid && <p>{state.numberValid}</p>}
<button
variant="HighEmphasis"
label="CMS.saveCTA"
onClick={() => saveButton()}
/>
</div>
);
}

ReactJS form validation

I have simple form validation for react. I made this from this source
http://www.dotnetawesome.com/2016/02/create-simple-forms-with-validation-in-react-js.html
there is my code. when I submit the form input error occurred inside of the isValid function. please help me to fix this.
AddMember page
class AddMember extends Component {
constructor(props) {
super(props);
this.state = {
loading : true,
formData: {
fname : "",
lname : "",
address1: "",
address2: "",
city : "",
mobile : "",
role : "",
email : "",
gender : ""
},
fields : []
};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
this.register = this.register.bind(this);
}
componentDidMount() {
document.title = globals.title + "Add New Member";
setTimeout(() => {
this.setState({loading: false})
}, 500);
}
handleSubmit = (e) => {
e.preventDefault();
let validForm = true;
this.state.fields.forEach(function (field) {
console.log(field.refs[field.props.name]);
if (typeof field.isValid === "function") {
let validField = field.isValid(field.refs[field.props.name]);
validForm = validForm && validField
}
});
if (validForm) {
console.log(this.state.fields);
}
};
handleChange = (name) => (value) => {
let formData = {
[name]: value
};
this.setState({
formData: formData
})
};
register (field) {
let s = this.state.fields;
s.push(field);
this.setState({fields: s});
console.log("ss");
};
render() {
const {classes} = this.props;
if (this.state.loading) {
return (
<div className={classes.posRelative}>
<CircularProgress size={80} className={classes.progress}/>
</div>
)
}
return (
<Grow in={true} style={{transformOrigin: "0 0 0"}}>
<Paper className={classes.root}>
<form
onSubmit={this.handleSubmit}
noValidate>
<Grid container spacing={16}>
<Grid item xs={12} sm={6}>
<MuiValidator placeholder={"First Name"} name={"fname"} type={"email"}
onChange={this.handleChange("fname")} value={this.state.formData.fname}
inputProps={{required:true}} onComponentMounted={this.register} fullWidth={true}/>
</Grid>
</Grid>
<Button type={"submit"} variant={"raised"} color={"primary"}>Submit</Button>
</form>
</Paper>
</Grow>
);
}
}
validation component
class MuiValidator extends Component {
constructor(props) {
super(props);
this.state = {
error : "",
errorMsg: ""
};
this.isValid = this.isValid.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleChange (e) {
this.props.onChange(e.target.value);
let isValidField = this.isValid(e.target);
// console.log(e.target.appendChild());
console.log(isValidField);
};
//Validation function
isValid (input) {
console.log(input);
//check required field
if (input.getAttribute("required") !== null && input.value === "") {
this.setState({error: true,errorMsg:'This field is required'});
return false
} else {
this.setState({error: false,errorMsg:''});
// input.nextSibling.textContent = "";
}
if (input.getAttribute("type") === "email" && input.value !== "") {
if (!this.validateEmail(input.value)) {
this.setState({error: true, errorMsg: "Please enter valid email address"})
return false
} else {
this.setState({error: false,errorMsg:''});
}
}
return true;
};
validateEmail = (value) => {
let re = /^(([^<>()[\]\\.,;:\s#"]+(\.[^<>()[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(value);
};
componentDidMount() {
if (this.props.onComponentMounted) {
this.props.onComponentMounted(this);
}
}
render() {
const {error,errorMsg} = this.state;
return (
<div>
<FormControl fullWidth={this.props.fullWidth} margin={"normal"} error={!!error}>
<InputLabel>First Name</InputLabel>
<Input name={this.props.name} type={this.props.type} placeholder={this.props.placeholder}
value={this.props.value} onChange={this.handleChange}
inputProps={this.props.inputProps} ref={this.props.name}/>
{error && <FormHelperText>{errorMsg}</FormHelperText>}
</FormControl>
</div>
);
}
}
I have no idea how can fix this please help me...

thanks all. finally, I found a solution. I changed the handle submit function like this
handleSubmit = (e) => {
e.preventDefault();
let validForm = true;
this.state.fields.forEach((field) => {
//create input element
let elm = document.createElement("input");
for (let attr in field.refs[field.props.name].props) {
if (attr !== "onChange" && attr !== "inputProps") {
elm.setAttribute(attr, field.refs[field.props.name].props[attr]);
elm.removeAttribute("onChange");
}
if (attr === "inputProps") {
for (let props in field.refs[field.props.name].props.inputProps) {
elm.setAttribute(props, field.refs[field.props.name].props.inputProps[props]);
}
}
}
if (typeof field.isValid === "function") {
let validField = field.isValid(elm);
validForm = validForm && validField
}
});
if (validForm) {
console.log(this.state.fields);
}
};

The problem resides in the on submit because the input is not retrieved correctly (I need a working code but it seems refs are not set correctly) while on event you pass the exact reference to the field coming directly from event. Check your refs and everything should work ok. As said from #SandipNirmal Formik has a great validation feature that you are substantially replicating.

Textfields component number validation React js

I have 3 Textfields, what I want to do is just to accept number so if someone put text and click continue the application should display an error saying that just numbers are allowed.
The following code displays an error message if the Textfield is empty and thats ok but the other validation to check if the user inputs text or numbers is pending and I'm stucked.
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import Divider from 'material-ui/Divider';
import cr from '../styles/general.css';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
buy_: '',
and_: '',
save_: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(event, index, value) {
this.setState({value});
}
clear() {
console.info('Click on clear');
this.setState({
buy_: '',
and_: '',
save_: ''
});
}
validate() {
let isError = false;
const errors = {
descriptionError: ''
};
if (this.state.buy_.length < 1 || this.state.buy_ === null) {
isError = true;
errors.buy_error = 'Field requiered';
}
if (this.state.and_.length < 1 || this.state.and_ === null) {
isError = true;
errors.and_error = 'Field requiered';
}
if (this.state.save_.length < 1 || this.state.save_ === null) {
isError = true;
errors.save_error = 'Field requiered';
}
this.setState({
...this.state,
...errors
});
return isError;
}
onSubmit(e){
e.preventDefault();
// this.props.onSubmit(this.state);
console.log('click onSubmit')
const err = this.validate();
if (!err) {
// clear form
this.setState({
buy_error: '',
and_error: '',
save_error: ''
});
this.props.onChange({
buy_: '',
and_: '',
save_: ''
});
}
}
render() {
return (
<div className={cr.container}>
<div className ={cr.boton}>
<Divider/>
<br/>
</div>
<div className={cr.rows}>
<div>
<TextField
onChange={(e) => {this.setState({buy_: e.target.value})}}
value={this.state.buy_}
errorText={this.state.buy_error}
floatingLabelText="Buy"
/>
</div>
<div>
<TextField
onChange={(e) => {this.setState({and_: e.target.value})}}
value={this.state.and_}
errorText={this.state.and_error}
floatingLabelText="And"
/>
</div>
<div>
<TextField
onChange={(e) => {this.setState({save_: e.target.value})}}
value={this.state.save_}
errorText={this.state.save_error}
floatingLabelText="Save"
/>
</div>
</div>
<div className={cr.botonSet}>
<div className={cr.botonMargin}>
<RaisedButton
label="Continue"
onClick={e => this.onSubmit(e)}/>
</div>
<div>
<RaisedButton
label="Clear"
secondary ={true}
onClick={this.clear = this.clear.bind(this)}
/>
</div>
</div>
</div>
);
}
}
Can someone help me on this please.
Thanks in advance.

You can prevent users from input text by using this :
<TextField
onChange={(e) => {
if(e.target.value === '' || /^\d+$/.test(e.target.value)) {
this.setState({and_: e.target.value})
} else {
return false;
}
}}
value={this.state.and_}
errorText={this.state.and_error}
floatingLabelText="And"
/>

The TextField component can restrict users to entering text using the JavaScript test method:
<TextField
onChange={(e) => {
if(e.target.value == '' || (/\D/.test(e.target.value))) {
this.setState({and_: e.target.value})}
}
else {
return false;
}
}
value={this.state.and_}
errorText={this.state.and_error}
floatingLabelText="And"
/>

Try adding this code in your validate function.
You can use regex to validate your fields for text or numbers like :
import * as RegExp from './RegExpression';
validate() {
let isError = false;
const errors = {
descriptionError: ''
};
if (this.state.buy_ && !RegExp.NAME.test(this.state.buy_)) {
// validation check if input is name
isError = true;
errors.buy_error = 'Invalid name';
}
if (this.state.and_ && !RegExp.NUMBER.test(this.state.and_)) {
// validation check if input is number
isError = true;
errors.and_error = 'Invalid Number';
}
this.setState({
...this.state,
...errors
});
return isError;
}
In RegexExpression file add these validations like this :
export const NAME = /^[a-z ,.'-()"-]+$/i;
export const NUMBER = /^[0-9]*$/ ;

You are not initialising error object in state but accessed in TextField as this.state.and_error. Either you should initialise error in constructor like this.state = { and_error: "" } or initialise error object as
this.state = {
error: {
and_error: "",
buy_error: "",
save_error: ""
}
}
So in your TextField
<TextField
onChange={(e) => {
if(e.target.value === "" || (/\D/.test(e.target.value))) {
this.setState({and_: e.target.value})}
}
else {
return false;
}
}
value={this.state.and_}
errorText={this.state.error.and_error} // If initialised error string access as this.state.and_error
floatingLabelText="And"
/>
Your validate function will be like
validate() {
let isError = false;
const errors = this.state.errors;
if (this.state.buy_.toString().length < 1 || this.state.buy_ === null) {
isError = true;
errors.buy_error = 'Field requiered';
}
if (this.state.and_.toString().length < 1 || this.state.and_ === null) {
isError = true;
errors.and_error = 'Field requiered';
}
if (this.state.save_.toString().length < 1 || this.state.save_ === null) {
isError = true;
errors.save_error = 'Field requiered';
}
this.setState({errors});
return isError;
}
Hope this will heps you!

You can use react-validation for all validation and set rules for validation