Objects are not valid as a React child (found: object with keys ..) - react-native

Question

I am trying to build a basic app where I fetch some restaurants from yelp api.
I get the error below on iOS and I can't seem to fix it.
Objects are not valid as a React child (found: object with keys {id,
alias, name, image_url, is_closed, url, review_count, categories,
rating, coordinates, transactions, price, location, phone,
display_phone, distance}). If you meant to render a collection of
children, use an array instead.
When I remove the part results={filterResultsByPrice('$')} from <ResultsList> the app works again.
Would appreciate a lot if someone could help.
This is my main screen:
import React, {useState} from 'react';
import { View, Text, StyleSheet } from 'react-native';
import SearchBar from '../component/SearchBar';
import useResults from '../hooks/useResults';
import ResultsList from '../component/ResultsList';
const SearchScreen = () => {
const [term, setTerm] = useState('');
const [searchApi, results, errorMessage] = useResults();
const filterResultsByPrice = (price) => {
return results.filter( result => {
return result.price === price;
});
};
return (
<View>
<SearchBar
term={term}
onTermChange={(newTerm)=> setTerm(newTerm)}
onTermSubmit={searchApi}
/>
{errorMessage ? <Text>{errorMessage}</Text> : null }
<Text>We have found {results.length} results</Text>
<ResultsList results={filterResultsByPrice('$')} title="Cost Effective"/>
<ResultsList results={filterResultsByPrice('$$')} title="Bit Pricier"/>
<ResultsList results={filterResultsByPrice('$$$')} title="Big Spender"/>
</View>
);
};
const styles = StyleSheet.create({});
export default SearchScreen;
This is the component I want to place on the screen:
import React from 'react';
import { View, Text, StyleSheet} from 'react-native';
const ResultsList = ({ title, results }) => {
return (
<View>
<Text style={styles.title}> {title}</Text>
<Text> Results: {results.length} </Text>
</View>
);
};
const styles = StyleSheet.create({
title:
{
fontSize: 18,
fontWeight: 'bold'
}
});
export default ResultsList;
And this is my useResults hook:
import {useEffect, useState } from 'react';
import yelp from '../api/yelp';
export default () => {
const [results, setResults] = useState([]); //default is empty array
const [errorMessage, setErrorMessage] = useState('');
const searchApi = async searchTerm=> {
console.log('Hi there');
try {
const response = await yelp.get('/search', {
params: {
limit: 50,
term: searchTerm,
location: 'san jose'
}
});
setResults(response.data.businesses);
} catch (err) {
setErrorMessage('Something went wrong.');
}
};
useEffect(()=> {
searchApi('pasta');
}, []);
return [searchApi, results, errorMessage];
};

Answer 1

You need to update your ResultsList component to this one, hopefully it will fix your issue permanently:
import React from "react";
import { View, Text, StyleSheet } from "react-native";
const ResultsList = ({ title, results }) => {
return (
<View>
<Text style={styles.title}> {title}</Text>
{results.map(result => (
<Text>Results: {result.length}</Text>
))}
</View>
);
};
const styles = StyleSheet.create({
title: {
fontSize: 18,
fontWeight: "bold"
}
});
export default ResultsList;