Objects are not valid as a React child. If you meant to render a collection of children, use an array instead

I am setting up a React app with a Rails backend. I am getting the error "Objects are not valid as a React child (found: object with keys {id, name, info, created_at, updated_at}). If you meant to render a collection of children, use an array instead."

This is what my data looks like:

[
    {
        "id": 1,
        "name": "Home Page",
        "info": "This little bit of info is being loaded from a Rails 
        API.",
        "created_at": "2018-09-18T16:39:22.184Z",
        "updated_at": "2018-09-18T16:39:22.184Z"
    }
]

My code is as follows:

import React from 'react';

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      homes: []
    };
  }

  componentDidMount() {
    fetch('http://localhost:3000/api/homes')
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            homes: result
          });
        },
        // error handler
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {

    const { error, isLoaded, homes } = this.state;

    if (error) {
      return (
        
          Error: {error.message}
        
      );
    } else if (!isLoaded) {
      return (
        
          Loading...
        
      );
    } else {
      return (
        
          Mi Casa
          This is my house y'all!
          Stuff: {homes}
        
      );
    }
  }
}

export default Home;

What am I doing wrong?

Your data homes is an array, so you would have to iterate over the array using Array.prototype.map() for it to work.

return (
    
      Mi Casa
      This is my house y'all!
      {homes.map(home => {home.name})}
    
  );

Stack Overflow Q#52428879, score: 216