Pass a list of type to component and display it

Question

Some code samples will explain what I am attempting to accomplish quite easily:

Top Level Page:

<Test Items="users" />

@code {

    public class User
    {
        public int Id { get; set; }
        public string Username { get; set; }
    }

    public List<User> users { get; set; } = new (){
        new User{
            Id = 1,
            Username = "Me",
        },
        new User{
            Id = 2,
            Username = "You",
        }
    }; 
}

and then in Test.razor:

<h3>Test</h3>

@{
    if (Users != null)
    {
        @foreach (var user in Users)
        {
            <div>
                @user.Username
            </div>
        }
    }
}

@code {
    [Parameter]
    public List<User> Users { get; set; }
}

However, the compiler returns the following error:

The type or namespace name 'User' could not be found (are you missing a using directive or an assembly reference?)

What do I need to modify in the above to correctly make the child component aware the User the in the top level page?

Answer 1

Test.razor should look like this

1. In your code User is within the Razor compiler top level class - in my case this is Index.razor so is referenced as Index.User. To make is available directly, move it to a separate class file.
2. Your Parameter is named incorrectly. It should be Items if you use <Test Items="users" />

<h3>Test</h3>

@{
    if (Items != null)
    {
        @foreach (var user in Items)
        {
            <div>
                @user.Username
            </div>
        }
    }
}

@code {
    [Parameter]
    public List<Index.User>? Items { get; set; }
}

@page "/"

<Test Items="users" />

@code {

    public class User
    {
        public int Id { get; set; }
        public string? Username { get; set; }
    }

    public List<User> users { get; set; } = new (){
        new User{
            Id = 1,
            Username = "Me",
        },
        new User{
            Id = 2,
            Username = "You",
        }
    }; 
}