title: React JS: With state, dynamically update an attribute (e.g., type) of an input that is a value in an object
body: <p>I have a state called <code>fields</code>, which is an array of objects. Each object has its html form, as you can see here:</p>
  <pre><code>fields: [
      {
          field: &lt;input /&gt;,
          inputType: 'number'
      }
  ]
  </code></pre>
  <p>What I want to do is add a type attribute to the input that will update with the vale of inputType, upon a user interaction somewhere else on the app.</p>
  <p>(I already have functions set up for the user interaction part. Basically, a user selects from a dropdown list, what they want the type to be. This drop list includes basic HTML input types, such as text, input, etc. Upon selecting a type, it will automatically update the value of inputType. I already have functions set up for that part.)</p>
  <p>A few things I've tried, but was unsuccessful:</p>
  <p>Idea 1:</p>
  <pre><code>fields: [
      {
          field: &lt;input type={this.inputType} /&gt;,
          inputType: 'number'
      }
  ]
  </code></pre>
  <p>Idea 2:</p>
  <pre><code>fields: [
      {
          field: &lt;input type={`this.inputType`} /&gt;,
          inputType: 'number'
      }
  ]
  </code></pre>
  <p>Idea 3:</p>
  <pre><code>fields: [
      {
          field: &lt;input type={inputType} /&gt;,
          inputType: 'number'
      }
  ]
  </code></pre>
  <p>Am I wrong to think that the <code>this</code> keyword would work within an attribute in an HTML form type as a value in an object?</p>
  <p>Thanks in advance, and let me know if any of this needs clarification.</p>