React: Setting state with array of objects - ruby-on-rails

Question

Mission:
This section is to illustrate fully what I'm trying to do, and the code I'm working with.
I'm trying to set the state of a SearchContainer component using an ajax call. The data that gets returned looks something like this:
[
{
"id":903,
"name":"Adrian College",
"url":"https://en.wikipedia.org/wiki/Adrian_College",
"nickname":"Bulldogs",
"city":"Adrian",
"state":"Michigan",
"conference":"Michigan Intercollegiate Athletic Association",
"athletics_url":null,
"enrollment":20000,
"selectivity":"High",
"slug":null,
"college_sports":[
{
"sport":{
"id":71,
"name":"Softball",
"gender":"Female",
"division":"Division III"
}
},
{
"sport":{
"id":68,
"name":"Volleyball",
"gender":"Female",
"division":"Division III"
}
}
]
}
]
I'm getting this information with the following ajax (within the SearchContainer component), which I then try to set the state of filteredColleges with the data returned (referenced above):
$.ajax({
url: `/api/search/colleges.json/?query=${query}`,
method: 'GET',
success: (data) => {
this.setState({ filteredColleges: data });
}
});
I'll be updating my SearchResults component like so:
<SearchResults filteredColleges={ this.state.filteredColleges }/>
Within SearchResults, I render the following:
const colleges = this.props.filteredColleges.map( function(college) {
return <College college={college} key={college.id}/>
});
And within each College component, I want to be able to reference the list of sports that belong to that college.
My Problem:
When I try to set the state of filteredColleges within my SearchContainer component...
this.setState({ filteredColleges: data });
I get the following error:
Uncaught Error: Objects are not valid as a React child (found: object with keys {sport}).
I've tried parsing the data many different ways, but no luck. I'm pretty sure this means that I can't have the sport objects within my data array? Am I interpreting this error correctly? Is there any way to get around this?
Edit #1: Sharing my College component
import React from 'react';
export default class College extends React.Component{
constructor(props) {
super(props);
}
render() {
const { name, nickname, conference, url, enrollment, selectivity, city, state } = this.props;
return (
<tr>
<td>{ this.props.college.name }</td>
<td>{ this.props.college.nickname }</td>
<td>{ this.props.college.conference }</td>
<td>{this.props.college.url}</td>
<td>{ this.props.college.enrollment }</td>
<td>{ this.props.college.selectivity }</td>
<td>{ this.props.college.city }</td>
<td>{ this.props.college.state }</td>
<td>{ this.props.college.college_sports }</td>
</tr>
)
}
}

Answer 1

I think the problem is that your College component is outputting objects from the college_sports array directly, something like:
const college_sports = this.state.college.college_sports
<ul>
{ college_sports.map(sport=> <li>{sport}</li>) }
</ul>
But you can't output whole objects, like the error says. Try something like:
const college_sports = this.state.college.college_sports
<ul>
{ college_sports.map(sport=> <li>{sport.name}</li>) }
</ul>

Answer 2

What is happening here is that you have multiple objects with the same name in an array. You could change your api to give you an array with no object names or unique object names for this section.