Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render

I'm new to react, and I'm building an app using the an unofficial harry potter api.

This is the app:

import axios from 'axios'
import { Link } from 'react-router-dom'

class HouseHistoryCard extends React.Component {
  constructor() {
    super()
    this.state = {
      househistory: {}
    }
  }

  componentDidMount() {
    const id = this.props.match.params.id
    axios.get(`https://www.potterapi.com/v1/houses/${id}?key=XXXXX`)

      .then(res => this.setState({ househistory: res.data }))
      .catch(err => console.log(err))
  }

  CapitlizeString() {
    return word.charAt(0).toUpperCase() + word.slice(1)
  }

  render() {
    console.log('char', this.state.househistory)
    return (
      <section className="single-househistory hero is-fullheight">
        <div className="tile is-ancestor">
          <div className="tile is-vertical is-4">
            <div className="tile">
              <div className="tile is-parent is-vertical">
                <article className="tile is-child notification">
                  <p className="title">School: {this.state.househistory.school}</p>
                  <p className="subtitle">Head of house: {this.state.househistory.headOfHouse}</p>
                </article>
                <article className="tile is-child notification">

                  <p className="title ">Mascot {this.state.househistory.mascot}</p>
                  <p className="title">Colors {this.state.househistory.colors}</p>

                </article>
              </div>
            </div>
            <div className="tile is-parent">
              <article className="tile is-child notification">

                <p className="subtitle">House Ghost {this.state.househistory.houseGhost}</p>
                <p className="subtitle">House colors: {this.state.househistory.colors}</p>          
                <div className="content">

                </div>
              </article>
            </div>
          </div>
          <div className="tile is-parent">
            <article className="tile is-child notification">
              <div className="content">
                <p className="title">house name {this.state.househistory.name}</p>

                <p className="title">founder: {this.state.househistory.founder}</p>
                <p className="subtitle"> House values: {this.state.househistory.values}</p>
                <div className="content">
                  <div className="tile is-parent">
                    <article className="tile is-child notification">
                      <figure className="image is-3by3">
                        <img src="https://i.imgur.com/sIuqs9a.jpg" />
                        <p className="subtitle"> {this.state.househistory.founder} founded this great house. It is said, {this.state.househistory.founder} valued {this.state.househistory.values} and wanted those who shared those values to enter their founding house.</p>
                        {/* <p className="subtitle">Hall of Fame: {this.state.househistory.members} </p> */}
                        {/* <p className="subtitle">When {this.state.househistory.name} first encountered a Boggart, it revealedtheir worst fears- {this.state.househistory.boggart}!</p> */}
                        <p className="subtitle"> {this.state.househistory.name} Hall of Fame: {this.state.househistory.members} </p>

                      </figure>
                    </article>
                  </div>
                  {/* <!-- Content --> */}
                </div>
              </div>
            </article>
          </div>
        </div>
        <Link to="/houses">
          <div className="box has-text-centered button is-black center">
                          Return to hogwarts history
          </div>
        </Link>
      </section>
    )
  }
}

export default HouseHistoryCard


The JSON response from the API is sucessfuly displaying when i console log, however i am having an issue rendering the output. I'm using Bulma for frontend styling.

This is in my app.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter, Switch, Route } from 'react-router-dom'
import { Link } from 'react-router-dom'

import axios from 'axios'
// import Auth from './lib/auth'


import 'bulma'
import './styles/styles.scss'


import HouseHistory from './components/HouseHistory'
import HouseHistoryCard from './components/HouseHistoryCard'


const App = () => (
  <BrowserRouter>
    <NavBar />

    <Switch>
      <Route exact path="/houses" component={HouseHistory} />
      <Route exact path="/houses/:id" component={HouseHistoryCard} />      
    </Switch>


  </ BrowserRouter>
)

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

This is the error message:

backend.js:6 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

in p (created by HouseHistoryCard)
in div (created by HouseHistoryCard)
in article (created by HouseHistoryCard)
in div (created by HouseHistoryCard)
in div (created by HouseHistoryCard)
in section (created by HouseHistoryCard)
in HouseHistoryCard (created by Context.Consumer)
in Route (created by App)
in Switch (created by App)
in Router (created by BrowserRouter)
in BrowserRouter (created by App)
in App

It's strange, as I've been using the same format for another page that fetched the data easily.. what am i doing wrong in this instance? Any help would be greatly appreciated.