title: How to Dynamically change the style of a react component
body: <p>I've been attempting to create a react app similar to monkeytype; where letters are formatted as the user types them. I've created a word functional component that wraps  tags, but I'm running into trouble now as I try and dynamically format a bunch of these word components depending on user input. One idea I have is to store these Word components in an array then use array indexing to call a method on the Word components that needs to be updated, but I've never experienced with react component objects or understand how the object methods work. (From what I observe, you can't call methods on react components?) Here's an example of what it looks like, how can I, say, at run-time allow the user to navigate to the &quot;Current&quot; word and style that word conditionally?</p>
  <pre class="lang-js prettyprint-override"><code>import Word from './word'; 
  import './typeTest.css'
  
  export default function TypeTest() {
      const test1 = &quot;the quick brown fox jumped over a tree and tripped over that tree the quick brown fox jumped over a tree and tripped over that tree the quick brown fox jumped over a tree and tripped over that tree the quick brown fox jumped over a tree and tripped over that tree&quot;; 
      const test1Arr = test1.split(' '); 
      
      return (
          &lt;div className='outer-word-container'&gt;
              &lt;div className=&quot;word-container&quot;&gt;    
                  {test1Arr.map(monoWord =&gt; &lt;Word inputWord = {monoWord}/&gt;)} 
                  &lt;Word inputWord=&quot;Scoll&quot;/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  <p>Any help would be appreaciated!</p>