title: Blazor - Bind each element in @foreach loop to corresponding Array index
body: <p>I have a @foreach loop in my Blazor page which iterates through a list of type UserInput (var userInput in UserInput).</p>
  <p>If userInput.IsInput is false, then I will display a <p> with contents userInput.Text.</p>
  <p>If userInput.IsInput is true, I will display an  field and store its contents in userInputBind[index].</p>
  <p>Below is the code I have tried:</p>
  <pre><code>@foreach (var userInput in myList)
  {
      if (userInput.IsInput)
      {
          &lt;input @bind=&quot;userInputBind[index]&quot;/&gt;
          if (index &lt; 6) index++;
      }
      else
      {
          &lt;p&gt;@item.Text&lt;/p&gt;
      }
  }
  
  @code {
      public List&lt;UserInput&gt; myList = new List&lt;UserInput&gt;
      {
          new UserInput { IsInput = false, Text = &quot;One&quot; },
          new UserInput { IsInput = false, Text = &quot;Two&quot; },
          new UserInput { IsInput = true, Text = &quot;&quot; },
          new UserInput { IsInput = false, Text = &quot;Four&quot; },
          new UserInput { IsInput = true, Text = &quot;&quot; },
          new UserInput { IsInput = false, Text = &quot;Six&quot; }
      };
      public List&lt;string&gt; userInputBind = new List&lt;string&gt; { &quot;&quot;, &quot;&quot; };
      public int index;
  
      public class UserInput
      {
          public bool IsInput { get; set; }
          public string Text { get; set; }
      }
  }
  </code></pre>
  <p>When I input &quot;string1&quot; into the first input field and &quot;string2&quot; into the second field, I expect the list to contain <code>{ &quot;string1&quot;, &quot;string2&quot; }</code>. Instead, both of the strings are &quot;string2&quot;. How can I fix this issue? Any help is appreciated!</p>