How to pass object from React.js to Controller API?

Question

I am a novice in ASP.NET and try to write my first application, whose client-size which is written in React.js, using this technology . This is the simple SPA, which should send the data from its form and getting response. But every request ends up with the message ("Request failed with status code 415") and I can't resolve this problem.

FormComponent.js code:

import './Form.css'
import React, { Component } from 'react'
import axios from 'axios'

export default class Form extends Component {
    
    constructor(props){
        super(props)

        this.state={
            name: "",
            email: "",
            text: ""
        }

        this.onNameChange = this.onNameChange.bind(this);
        this.onEmailChange = this.onEmailChange.bind(this);
        this.onTextChange = this.onTextChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onNameChange(e) {
        this.setState({ name: e.target.value });
    }

    onEmailChange(e) {
        this.setState({ email: e.target.value });
    }

    onTextChange(e) {
        this.setState({ text: e.target.value });
    }

    onSubmit(e) {
        e.preventDefault();
        var commentName = this.state.name;
        var commentEmail = this.state.email;
        var commentText = this.state.text;
        if (!commentName || !commentEmail || !commentText) {
            return;
        }

        console.log(commentName);
        console.log(commentEmail);
        console.log(commentText);

        var data = new FormData();

        data.append("Name", commentName);
        data.append("Email", commentEmail);
        data.append("Text", commentText);
        axios({
            method: 'post',
            url: '/api/Comment',
            data: data,
        })
            .then((res) => {
                console.log(res.data);
            })
            .catch((err) => { throw err });

        this.setState({ name: "", email: "", text: "" });
        
    }

    render() {
        return (
            <section>
                <form id="my-form" onSubmit={this.onSubmit}>
                    <a id="feedback-btn" type="submit">Нам важлива ваша думка</a>
                    <label htmlFor="in_name">Ім'я:</label>
                    <input id="in_name" type="text" onChange={this.onNameChange}/>
                    <label htmlFor="in_email">Email:</label>
                    <input id="in_email" type="email" onChange={this.onEmailChange}></input>
                    <label htmlFor="text_feedback">Коментар:</label>
                    <textarea name="feedback" id="text_feedback" onChange={this.onTextChange}></textarea>
                    <button type="submit">Залиште відгук</button>
                </form>
            </section>
        )
    }
}

Controller API Code:

using Gazda.Models;
using Microsoft.AspNetCore.Mvc;
using System;

// For more information on enabling Web API for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace Gazda.Controllers
{
    [Route("/api/Comment")]
    [ApiController]
    public class CommentController : ControllerBase
    {

        [HttpPost]
        public IActionResult Post([FromBody]Comment comment)
        {

            comment.Id = Guid.NewGuid().ToString();

            return Ok(comment);
        }

        [HttpGet]
        public IActionResult Get()
        {
            return Ok("success");
        }

    }
}

and Comment Model:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace Gazda.Models
{
    public class Comment
    {
        public string Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public string Text { get; set; }
    }
}

It seems I pass arguments to my Controller API wrongly, but I spent few hours for it and couldn't find any solution.

Thank you in advance!!!!

P.S. Sorry for my English

Answer 1

You are posting a form to an API controller but reading the body. 415 error means your data in the post is not matching what the API is expecting.

Try removing [FromBody] decorator or change it to [FromForm]