React throwing Error: Objects are not valid as a React child

Question

I am currently in the process of trying to pass a network graph from my flask app to my react app, and I am running into a issue on the frontend side where I am trying to load json data from the backend and store it in the React state but it keeps throwing the error:

× Error: Objects are not valid as a React child (found: object with keys {id, label, title}). If you meant to render a collection of children, use an array instead.

I am not sure why it is not working for my network graph object but works perfectly fine for my other objects that are being created and sent the same way.

My flask object:

class NetworkNode:
def __init__(self, id, label, title):
    self.id = id
    self.label = label
    self.title = title

def info(self):
    return {
        "id": self.id,
        "label": self.label,
        "title": self.title
    }

class NetworkGraph:
def __init__(self):
    self.nodes = []
    self.edges = []

def add_node(self, node):
    self.nodes.append(node)

def add_edge(self, edge):
    self.edges.append(edge)

def load(self, storage_vessels, pumps, reactors):
    for sv in storage_vessels:
        network_node = NetworkNode(id=sv.id, label=sv.id, title="")
        self.add_node(network_node)
    for p in pumps:
        network_node = NetworkNode(id=p.id, label=p.id, title="")
        self.add_node(network_node)
    for r in reactors:
        network_node = NetworkNode(id=r.id, label=r.id, title="")
        self.add_node(network_node)

def info(self):
    return {
        'Nodes': [node.info() for node in self.nodes],
        'Edges': self.edges,
    }

The API view:

@app.route('/api/network-graph')
def network_graph():
    network_graph = NetworkGraph()
    network_graph.load(system.storage_vessels, system.pumps, system.reactors)    

    return {
        'Network_Graph': network_graph.info(),
    }

Where the error is occuring (it throws the error on the 'Nodes' line):

 useEffect(() => {
        axios.get('http://localhost:5000/api/network-graph')
        .then((response) => {
          console.log(response.data)
          setNodes(response.data['Network_Graph']['Nodes']);
          setEdges(response.data['Network_Graph']['Edges']);
        })
      }, [])

Any help will be greatly appreciated

Answer 1

I have found my issue. It was related to another component where I was trying to render the node object directly when I was debugging it.

My component that was throwing the error looked like this:

import React from 'react';

function NetworkGraphComponent({nodes, edges}) {

    return (
        <div>
            {nodes}
            {edges}
        </div>
    )
}

export default NetworkGraphComponent

The moment I commented out the {nodes} line it worked. Silly me forgot I still had the values loading there to check if it was working lol