title: how to check if string contains number with react
body: <p>I am building a user validation website, I want each input to verify if the string that was entered:</p>
  
  <ol>
  <li>Have uppercase first letter</li>
  <li>doesn't contain numbers</li>
  <li>doesn't contain "$%^&amp;*()"</li>
  </ol>
  
  <p>I did the first task, but I can't do the last ones.</p>
  
  <p>I have tried <code>!isNaN(firstName) === true</code> and it wont work</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from 'react';
  
  class Profile extends Component {
    state = {
      details: {
        firstName: '',
        lastName: '',
        ID: '',
        Email: ''
      },
      error: false,
      complete: false
    };
  
    OnSubmit = e =&gt; {
      e.preventDefault();
      const { firstName } = this.state.details;
      if (
        firstName.charAt(0) !== firstName.charAt(0).toUpperCase() &amp;&amp;
        !isNaN(firstName) === true
      ) {
        this.setState({ error: true });
      } else {
        this.setState({ complete: true });
      }
    };
  
    OnChange = e =&gt; {
      e.preventDefault();
      this.setState({
        details: { ...this.state.details, [e.target.name]: e.target.value }
      });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;div className="container text-center mt-4" style={{ width: '500px' }}&gt;
            &lt;form className="px-4 py-3" onSubmit={this.OnSubmit}&gt;
              &lt;div className="form-group"&gt;
                {this.state.error === true ? (
                  &lt;p className="text-danger"&gt;
                    Some of the details are wrong check the fields above
                  &lt;/p&gt;
                ) : null}
                &lt;label&gt;First Name:&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  onChange={this.OnChange}
                  name="firstName"
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Last Name:&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  onChange={this.OnChange}
                  name="lastName"
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;ID Number:&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  onChange={this.OnChange}
                  name="ID"
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;label&gt;Email:&lt;/label&gt;
                &lt;input
                  type="text"
                  className="form-control"
                  onChange={this.OnChange}
                  name="Email"
                /&gt;
              &lt;/div&gt;
              &lt;button type="submit" className="btn btn-secondary mt-3"&gt;
                Check
              &lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Profile;
  </code></pre>