Ravenous Part1 Error ("Object are not valid as a React child")

Hi everyone,

I’m currently working on https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-two/projects/passing-information.

I don’t get why I get this error message:

.

This is my code:

SearchBar.js: (the one with the object that apparently causes trouble):

import React from "react";
import "./SearchBar.css";

const sortByOptions = {
  "Best Match": "best_match",
  "Highest Rated": "rating",
  "Most Reviewed": "review_count"
};

class SearchBar extends React.Component{
    renderSortByOptions(){
        return Object.keys(sortByOptions).map(sortByOption => {
            let sortByOptionValue = sortByOptions[sortByOption];
            return <li key={sortByOptionValue}>{sortByOptions}</li>
        });
    }
    render(){
        return (
        <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" />
          <input placeholder="Where?" />
        </div>
        <div className="SearchBar-submit">
          <a>Let's Go</a>
        </div>
      </div>
      )
    }
};

export default SearchBar

App.js:

import React from "react";
import './App.css';
import BusinessList from '../BusinessList/BusinessList';
import SearchBar from '../SearchBar/SearchBar';

class App extends React.Component {
  render(){
  return (<div className="App">
  <h1>ravenous</h1>
  <SearchBar />
  <BusinessList /> 
</div>
  );
}
};

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App/App';
import reportWebVitals from './reportWebVitals';

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Thanks a lot for your help!

Look really closely at this line:

return <li key={sortByOptionValue}>{sortByOptions}</li>

sortByOptions is your object that has all three of the search options in it that you’re iterating through to generate the JSX in the map callback, so it isn’t what you want to set the display text of the list item.

Click here if you need a more specific hint

At that point in your code, you’d have these to choose from:

  • sortByOptionValue that you defined which would be best_match, rating, or review_count
  • sortByOption, which is the parameter in the callback, so it is the object’s key. ‘Best Match’, ‘Highest Rated’, or ‘Most Reviewed’

Out of these, your user would probably prefer to see sortByOption

3 Likes

great thanks, that solved it!

1 Like