title: Using pseudo-classes in React component
body: <p>In my React component, I have a form with multiple input fields. In the CSS classes that I'm working with, there's an "invalid" pseudo-class that should highlight the field if its value is invalid. Currently, the input fields do not have any classes defined in my component. They're using the default styling that comes from the CSS file.</p>
  
  <pre><code>class MyForm extends Component {
  
     render() {
  
        return(
  
           // There's more code here. Not showing to keep things simple
  
           &lt;input type="text" name="someProperty" value={myObject.someProperty} onChange={e =&gt; this.someFunction(e)} /&gt;
  
        );
     }
  
  }
  </code></pre>
  
  <p>How do I actually use this -- meaning, how do I set the input field to invalid? I tried simply adding "invalid" to its CSS class but it didn't work.</p>
  
  <p>This is what I tried with no results:</p>
  
  <pre><code>&lt;input type="text" name="someProperty" className={showInvalid} value={myObject.someProperty} onChange={e =&gt; this.someFunction(e)} /&gt;
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>Doing a bit more research on pseudo-classes, they do NOT go into the class. So in HTML, the input field would simply appear as below:</p>
  
  <pre><code>&lt;input name"someProperty" invalid /&gt;
  </code></pre>