Uncaught Error: Objects are not valid as a React child (found: object with keys {message})

Question

I have ReactJS application which receives data from SpringBoot API. I am successfully able to receive the data from SpringBoot as seen through console.log(). But i am getting error while displaying result from springboot to a page.

Error is in WelcomeComponent: .then(response =>this.handleSuccessFullResponse(response)) is causing whole page to go blank.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import HelloWorldService from "../../API/todo/HelloWorldService";
class WelcomeComponent extends Component {
  constructor(props) {
    super(props)
    this.getWelcomeMessage = this.getWelcomeMessage.bind(this)
    
    this.state = {
      welcomeMessage: ' '
    }
    this.handleSuccessFullResponse = this.handleSuccessFullResponse.bind(this)
  }
  render() {
    return (
      <>
        <h1>Welcome!</h1>
        <div className="container">
          Welcome {this.props.params.name} You can manage your tods from{" "}
          <Link to="/todos">here</Link>
        </div>
        <div className="container">
          Click here to get customized message.
          <button onClick={this.getWelcomeMessage} className="btn btn-success">
            Here
          </button>
        </div>

        <div className="container">
          {this.state.welcomeMessage}
        </div>
      </>
    );
  }
  getWelcomeMessage() {
    //console.log("getMessageClicked");
    HelloWorldService.executeHelloWorldService()
      .then(response =>this.handleSuccessFullResponse(response)) //request successful
      //.then(response=>console.log(response.data))
      //.catch(); //request failed
  }
  handleSuccessFullResponse(response) {
    this.setState({welcomeMessage: response.data})
  }
}
export default WelcomeComponent;

Answer 1

you are getting Object in the response which is this:

{message: Hello World}

In order to render it, you do not need Object but the value .

You are doing this:

handleSuccessFullResponse(response) {
    this.setState({welcomeMessage: response.data})
  }

Replace it to this:

handleSuccessFullResponse(response) {
    this.setState({welcomeMessage: response.data.message})
  }

Hope this helps, if error occurs, share the snapshot with details here.

Regards, Shameel Uddin