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

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];

};

Can you please console log the results array? It seems the filter for '$' is not being filtered-out properly. — Jawad ul hassan
@Jawadulhassan I can see the full list returning from yelp as expected — Cigdem Sahiner
I have no clue why, but after I added the console log under ResultsList, without changing absolutely nothing else, it is now working as expected... This is strange. — Cigdem Sahiner
It happens to all us, sometimes :) But problem is in your mapping of results.length. — Jawad ul hassan
@CigdemSahiner did you find the answer I a too facing this issue. — Arun

Jawad ul hassan Jawad ul hassan · Accepted Answer · 2020-02-09T20:04:14

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;

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

1 Answers