How to fetch web api using react.js component? Urgent

saradalal

Hi,

I am new to asp.net core and react.js. This is my first component. Please help. Please find my code in zip file. Please do the modification in code. I used asp.net core react project. I added a API Controller class with read/write actions. I am trying to display the logged in username on webpage. Please help me how to call controller get method from react.js component and display it on webpage.

Also, controller web api should return json or string.....

Thanks

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Ganesan C5y ago
What is response coming from API? Pls check the response using console.log(response) and check in console.
saradalal5y ago
Thanks Ganesan. I tried the code and its giving me issue.

Error: Objects are not valid as a React child (found:[object Response]). If you meant to render a collection of children, use an array instead.
in label at (GetUserName.js)
in div at GetUserName.js
Ganesan C5y ago
Check this one.
import React from "react";

export class GetUserName extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: ""
    }
  }

  componentDidMount() {
    fetch("api/User/GetLogonUserId")
      .then((response) => {
        //Your API return the string value. So no need to parse json.
        // Directly assign the value to local state
        // If you need to check value of response then use console.log(response)
        this.setState({ userName: response });
      })
      .catch((error) => {
        console.log(error);
      });
  }


  render() {
    return (


        {this.state.userName}
)
}
}

saradalal5y ago

Thanks. Would you please provide the complete react.js code to call api and get the logged in username value and set the username value in label and render the value.

Please help. I put the code in the zip file in the original post.Also, thanks for pointing the mistake in Controller api.

Ganesan C5y ago

Hi,

You have added route parameterfor UserController is [Route("[controller]")]. But you have called "api/User/" from React component. So, Your route should be [Route("api/[controller]")], then only it call correct User controller.

[ApiController]
[Route("api/[controller]")]
public class UserController: ControllerBase
{
[HttpGet]
public string GetLogonUserId()
{
}
}

componentDiDMount() {
fetch(‘api/User/ GetLogonUserId’)
.then ((response)=> response.json())
}