Как предотвратить повторение кода проверки формы

Вы можете извлечь компонент FormItem:

class FormItem extends React.Component {
  render() {
    return (
      <div>
        <label>
          {this.props.label}
        </label>
        <input
          {...this.props.input}
        />
        <ErrorOutput 
          case = {this.props.input.value} 
          name = {this.props.input.name} 
          submit = {this.props.onSubmit} 
        />
      </div>
    );
  }
}

и используйте его в своем App:

render() {
    return (
      <form onSubmit = {this.handleSubmit.bind(this)}>
        <FormItem label='First name:' input = {{
          type: 'text'
            name: 'firstName'
            value: this.state.firstName,
            onChange: this.handleValidation.bind(this)
          }} 
          onSubmit = {this.state.submit}
        />
        <FormItem label='Phone number:' input = {{
          type:'tel'
            name :'telNo'
            value : {this.state.telNo}
            onChange : {this.handleValidation.bind(this)}
          }} 
          onSubmit = {this.state.submit}
        />
        <button>
          Submit
        </button> 
      </form>
    )
  }

здесь становятся удобными такие библиотеки, как окончательная форма реакции и редукционная форма.

UPD

Компонент ErrorOutput не должен ничего проверять, это не входит в обязанности компонента. Вместо этого вы можете проверить свои значения в событии размытия входов и перед отправкой:

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

    this.state = {
      firstName: '',
      telNo: '',
      submit: false,
      errors: {},
      invalid: false,
    }
  }

  handleSubmit(e){
    e.preventDefault()
    if (this.validate()) {
      // handle error
    } else {
      // submit
    }
  }

  validate = () => {
    const { firstName, telNo } = this.state
    const errors = {}
    let invalid = false;
    if (firstName === '' || !firstName.match(/^[a-zA-Z]+$/)) {
      errors.firstName = 'first name is required'
      invalid = true;
    } else if (telNo === '' || !telNo.match(/^[0-9]+$/)) {
      telNo.telNo = 'telNo is required'
      invalid = true;
    }
    this.setState({
      invalid,
      errors,
    })
    return invalid;
  }

  render() {
    return (
      <form onSubmit = {this.handleSubmit.bind(this)}>
        <FormItem label='First name:' input = {{
            type: 'text',
            name: 'firstName',
            value: this.state.firstName,
            onChange: e => this.setState({ firstName: e.target.value }),
            onBlur: () => this.validate(),
          }} 
        />
        <FormItem label='Phone number:' input = {{
            type: 'tel',
            name: 'telNo',
            value: this.state.telNo,
            onChange: e => this.setState({ telNo: e.target.value }),
            onBlur: () => this.validate(),
          }} 
        />
        <button>
          Submit
        </button> 
      </form>
    )
  }
}

и FormItem и ErrorOutput:

const ErrorOutput = ({ error }) => <span>{error}</span>

class FormItem extends React.Component {
  render() {
    return (
      <div>
        <label>
          {this.props.label}
        </label>
        <input
          {...this.props.input}
        />
        {this.props.error && <ErrorOutput error = {this.props.error} />}
      </div>
    );
  }
}

const ErrorOutput = ({ errorText }) => <span>{errorText}</span>;

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

    this.state = {
    firstName: "",
    telNo: "",
    submit: false,
    errors: {} //Add errors object to the state.
    };
}

handleSubmit(e) {
    e.preventDefault();
    const errors = this.validateData();

    if (Object.keys(errors).length === 0) {
       alert("Success");
    }
    //else errors exist
    this.setState({ errors });
}

validateData = () => {
    let errors = {};
    const { firstName, telNo } = this.state; // read the values to validate

    if (firstName.length === 0) {
    errors.firstName = "Required";
    } else if (firstName.length > 0 && !firstName.match(/^[a-zA-Z]+$/)) {
    errors.firstName = "Letters only";
    }

    if (telNo.length === 0) {
    errors.telNo = "Required";
    } else if (telNo.length > 0 && !telNo.match(/^[0-9]+$/)) {
    errors.telNo = "Numbers only";
    }

    return errors;
};

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

render() {
    const { errors } = this.state; // read errors from the state
    return (
    <form onSubmit = {this.handleSubmit.bind(this)}>
        <div>
        <label>First name:</label>
        <input
            type = "text"
            name = "firstName"
            value = {this.state.firstName}
            onChange = {this.handleValidation.bind(this)}
        />
        {errors.firstName && <ErrorOutput errorText = {errors.firstName} />}
        </div>
        <div>
        <label>Phone number:</label>
        <input
            type = "tel"
            name = "telNo"
            value = {this.state.telNo}
            onChange = {this.handleValidation.bind(this)}
        />
        {errors.telNo && <ErrorOutput errorText = {errors.telNo} />}
        </div>
        <button>Submit</button>
    </form>
    );
}
}

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