Onclick event using variable in for loop

[NaskoIT]

Describe the bug

I am using Blazor and I want to generate 26 div elements which represent english alphabet.
When an element is clicked I want to invoke method with character in the div as parameter.

To Reproduce

Steps to reproduce the behavior:

1. Using Blazor and .net core 3.0 preview
2. Code
   <div class="d-flex justify-content-center flex-wrap w-75 mx-auto">
@for (int i = 0; i < letters.Length; i++)
{
<div class="alphabet-letter text-dark" @onclick="@(() => Check(letters[i]))">@(letters[i].ToString().ToUpper())</div>
   }
   </div>

@code{
char[] letters = new char[] { 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' };
}
4. The error when I click on some div is IndexOutOfRangeException because the variable "i" is 26 when the element is clicked.

More details

This error is predictable because when I click some div, for loop has finished yet and the value of variable i is 26 in this moment.

I can fix my problem with this solution:
<div class="alphabet-letter text-dark" @onclick="@(() => Check('a'))">A</div>
<div class="alphabet-letter text-dark" @onclick="@(() => Check('b'))">B</div>
<div class="alphabet-letter text-dark" @onclick="@(() => Check('c'))">C</div>
<div class="alphabet-letter text-dark" @onclick="@(() => Check('d'))">D</div>
And continue with all letters to z.
But I want a bit more smart solution.

In the onclick event I need to use the value of variable "i" in the moment when div was generated.

Do you know some better solution for my problem?

[enetstudio]

See the solution here: https://stackoverflow.com/questions/54812427/for-loop-not-returning-expected-value-c-sharp-blazor/54813295#54813295

[mkArtakMSFT]

Thanks for contacting us, @NaskoVasilev.
@enetstudio 's answer is a good way you can do that.

[NaskoIT]

Thanks a lot. The solution help me solve my problem.