trjhtr

I created an example of a simple form for multiple inputs (name and phone number) in React. If user enters invalid data in input field, error text is displayed near the same field.

I learned a lot of different examples of the form validation using React and I don't understand where is the better place for validation checking in form.

import React from 'react'
import render from 'react-dom'

const ErrorOutput = props => 
 let name = props.name
 let inputValue = props.case
 if (name === 'firstName') 
 if (!inputValue.match(/^[a-zA-Z]+$/) && inputValue.length > 0) 
 return <span>Letters only</span>
 
 return <span></span>
 
 if (name === 'telNo') 
 if(!inputValue.match(/^[0-9]+$/) && inputValue.length > 0) 
 return <span>Numbers only</span>
 
 return <span></span>
 


class App extends React.Component 
 constructor(props)
 super(props)

 this.state = 
 firstName: '',
 telNo: ''
 
 

 handleValidation(e) 
 this.setState(
 [e.target.name]: e.target.value 
 ) 
 

 render() 
 return (
 <form>
 <label>
 First name:
 </label>
 <input
 type='text'
 name ='firstName'
 value = this.state.firstName
 onChange = this.handleValidation.bind(this)
 />
 <ErrorOutput case=this.state.firstName name='firstName' />
 <label>
 Phone number:
 </label>
 <input
 type='tel'
 name ='telNo'
 value = this.state.telNo
 onChange = this.handleValidation.bind(this)
 />
 <ErrorOutput case=this.state.telNo name='telNo' />
 </form>
 )
 


render(
 <App />,
 document.getElementById('root')
)