3
\$\begingroup\$

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. 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')
)
\$\endgroup\$
2
  • 1
    \$\begingroup\$ This code looks good! I think the main thing to consider is how you'd reuse it once you start adding extra fields - you might want to take the whole label/input/error output combination and encapsulate it as a re-usable component. As a standalone piece of code though, I can't find any obvious improvements to make :) \$\endgroup\$
    – Joe Clay
    May 23 '18 at 11:46
  • 1
    \$\begingroup\$ @KateHerasimenak your post claims "The last name should contain only small and capital letters, numbers, special characters, etc" yet the regular expression appears to only look for upper- and lower-case letters and the message is "Letters only" so should "numbers, special characters, etc" really be allowed? \$\endgroup\$ Sep 12 '18 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.