trjhtr

I created an example of a simple form for a last name input in React, where I can check the validation of the data at the time of input.

The last name should contain only small and capital letters, numbers, special characters, etc. If the user enters other characters, the error text is displayed.

I will be grateful for tips on improving the style.

index.js:

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

const ErrorOutput = props => 
 if (!(props.case).match(/^[a-zA-Z]+$/) && (props.case).length > 0) 
 return <span>Letters only.</span>
 
 return <span></span>


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

 this.state = value: '' 
 

 handleValidation(e) 
 this.setState(
 value: e.target.value
 )

 

 render() 
 const inputValue = this.state.value

 return (
 <form>
 <label>
 Last name:
 </label>
 <input
 type='text'
 name ='lastName'
 value = this.state.value
 onChange = this.handleValidation.bind(this)
 />
 <ErrorOutput case=inputValue />
 </form>
 )
 


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