Post (using fetch) a List of object inside of general object JSX to ASP.Net Core API

Question

I am using ReactJS and ASP.Net Web API

This is the model:

  public class Skill
{
  public int Id { get; set; }
  public string Description { get; set; }
}

public class RegisterProject
{
  public class Request
  {
    public string Objective { get; set; }
    public string Description { get; set; }
    public long UserId { get; set; }
    public int CurrencyId { get; set; }
    public int BudgetId { get; set; }

    public List<Skill> Skills = new List<Skill>();
  }

  public class Response : Models.Common.Generic

Controller:

   [HttpPost]
    [Route("[action]")]
    [EnableCors("AllowAllOrigin")]
    public ActionResult<Models.Main.RegisterProject.Response> postRegisterProject([FromBody] Models.Main.RegisterProject.Request registerProjectRequest)

In React JS

const handleSubmit = (e) => { console.log(formPublishProject);

fetch(global.config.url + "Project/postRegisterProject/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json",
  },
  body: JSON.stringify({
    Objective: "a",
    Description: "b",
    UserId: 1,
    CurrencyId: 1,
    BudgetId: 1,
    Skills: [
      { Id: 1, Description: "ReactJS" },
      { Id: 2, Description: "Html" },
    ],
  }),
})
  .then(function (response) {
    response.json().then(function (data) {
      console.log("llego aqui");
      console.log(data);
    });
  })
  .catch(function (err) {
    console.log("Fetch Error :-S", err);
  });

};

In the controller a debug image below I don't receive the list of skills, I don't know if my skills definition is wrong or Is there another problem?

Answer 1

Please change skills like this

public List<Skill> Skills { get; set; }