ERR: obj are not valid as react child

Welcome to Programming Tutorial official website. Today - we are going to cover how to solve / find the solution of this error ERR: obj are not valid as react child on this date .

I am using create-react-app with websocketserver backend. I am getting the error “Objects are not valid as a React child (found: object with keys {id, status}). If you meant to render a collection of children, use an array instead.”

my backend

          std::string out = "[{"id": "" + Event->getID().asString() + "",";
          if (auto stateEvent = dynamic_cast<const StateReport*>(Event.get()))
            out += ""State-Event": "";
            out += stateToString(stateEvent->getState());
            out += ""}]";
            out += ""Unknown event": ""}]";

          out += "n";

          objcomm::Data resp;
          resp._data = (const std::uint8_t*)out.c_str();

react code

componentDidMount() {
    client.onmessage = (message) => {
      var data =;
      this.setState({dataFromServer: data});

  render() {
      return "loading"
    else if(this.state.dataFromServer && this.state.dataFromServer.length >0){
      return( => (

console log of

  [{"id": "1.2","State-Event" : "Running"}]

I wanted to access something like => {}) but when i do this i get is not a func

what am i doing wrong.


Most likely, during the first execution of render() the value of this.state.dataFromServer will still be undefined, which explains the “ is not a function” error.

During the next render() execution it should have been set (as a result of the API having been called), and then you can use it.

This is a very common situation. See below for an example of how to deal with it:

render() {
  if (!this.state.dataFromServer)
    return <p>Loading...</p>;

  return => this.createElement(item));

The this.createElement is just an example here, it is up to you to either implement it, or to do something else with each item. A very simple (starter) implementation could be:

createElement = (item) => <p>id: {}</p>