title: onClick handler does not update innerHTML of elements
body: <p>I have an onClick function that is attached to rows of a table by the characterID that is provided from an array of objects (instantiated from a constructor function).</p>
  <p>I'm using styled-components, hence the odd tag names further down.</p>
  <p>Here's the function:</p>
  <pre><code>    //this is an onClick function for use in record rows in the JSX populated table for characters  
      function barkCharData(idIn){
          console.log(&quot;==========================&quot;);
          
          try{
              //Get the fields...
              let idField = document.getElementById(&quot;txt_idField&quot;);
              let nameField = document.getElementsByName(&quot;first_name_field&quot;);
  
              //Set the fields
              idField.innerHTML = String(ar_charBin[idIn-1].id);
              console.log(&quot;\n---&gt; idField: &quot;+idField);
              console.log(&quot;---&gt; idField.innerHTML: &quot;+idField.innerHTML+&quot;\n&quot;)
              
              nameField.innerHTML = String(ar_charBin[idIn-1].id);
              console.log(&quot;\n---&gt; nameField: &quot;+nameField);
              console.log(&quot;---&gt; nameField.innerHTML: &quot;+nameField.innerHTML+&quot;\n&quot;)
  
          }
          catch(error)
          {
              console.log(&quot;Pants were shat in the 'barkCharData' function [line 72]:\n\t&quot; +error)
          }                    
      }
  }
  </code></pre>
  <p>I can access each objects properties fine because they're all stored in an array called <code>ar_charBin</code>. Had them console logged earlier with no issues.</p>
  <p>The problem I'm having is that I want to put these properties in to disabled text boxes.</p>
  <p>These are defined as JSX here:</p>
  <pre><code>export const ExpTable = () =&gt; {
  
      let Char1 = new char_Obj(1,&quot;Saloth&quot;, &quot;Saar&quot;, 45, &quot;Male&quot;, &quot;Dragonborn&quot;, &quot;Sorcerer&quot;, 10);
      let Char2 = new char_Obj(2,&quot;Kaedwen&quot;, &quot;Isaani&quot;, 36, &quot;Male&quot;, &quot;Dragonborn&quot;, &quot;Sorcerer&quot;, 8); 
      let Char3 = new char_Obj(3,&quot;Euridice&quot;, &quot;Swiftblade&quot;, 23, &quot;Female&quot;, &quot;Human&quot;, &quot;Bard&quot;, 5);
      
      //array to store characters
      let ar_charBin = [];
      
      //push all chars into the array
      ar_charBin.push(Char1, Char2, Char3);
  
      return(
          &lt;&gt;
  ...table head stuff... 
  
                      &lt;tbody&gt;
                          {ar_charBin.map((character) =&gt; (
                          &lt;TableRow key={character.id} onClick={() =&gt; barkCharData(character.id)}&gt;
                              &lt;td&gt;{character.full_name}&lt;/td&gt;
                              &lt;td&gt;Level {character.level} {character.classType}&lt;/td&gt;
                          &lt;/TableRow&gt; 
                          ))}
                      &lt;/tbody&gt;
                  &lt;/Table&gt;
  
                  &lt;Wrapper&gt;
                  &lt;h2&gt;Object elements&lt;/h2&gt;
                  &lt;p&gt;These fields should update with object&lt;br/&gt;attributes when the records above are clicked&lt;/p&gt;
  
                  &lt;input type=&quot;text&quot; id=&quot;txt_idField&quot; name =&quot;id_field&quot; placeholder=&quot;ID&quot;/&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_fNameField&quot; name =&quot;first_name_field&quot; placeholder=&quot;First Name&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_sNameField&quot; placeholder=&quot;Second Name&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_ageField&quot; placeholder=&quot;Age&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_cNameField&quot; placeholder=&quot;Full Name&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_genderField&quot; placeholder=&quot;Gender&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_raceField&quot; placeholder=&quot;Race&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_classField&quot; placeholder=&quot;Class&quot; disabled={true} /&gt;
                  &lt;input type=&quot;text&quot; id=&quot;txt_levelField&quot; placeholder=&quot;Level&quot; disabled={true} /&gt;
              &lt;/Wrapper&gt;
              &lt;/Wrapper&gt;
          &lt;/&gt;
      )
  </code></pre>
  <p>So in the onClick function, it doesn't update the innerHTML of any element. Not sure why. I've tried inputting strings in VScode and in the page when I run <code>npm start</code> too but nothing seems to change them.</p>
  <p>Screenshot of the app:</p>
  <p><a href="https://i.stack.imgur.com/17Ewq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/17Ewq.png" alt="App" /></a>
  Looked for solutions but got nowhere so far. What am I doing wrong?</p>