Ravenous Part 1 - Mystery index.js error

Get Help React.js
#1

Hello again, friends

https://www.codecademy.com/paths/build-web-apps-with-react/tracks/bwa-intro-to-react/modules/ravenous-part-one/projects/create-prj-components

I did a decent job my first time through, but I only ever saw a blank, white screen in my browser. In the JavaScript console, it says I have two problems in my index.js file. Here’s the kicker: I never had anything to do with the index.js file.

I watched the video tutorial on youtube, and found one spot where I had neglected to add parentheses, but it didn’t solve my problem. Following the video, I still have the same error in my browser after running npm start in the terminal.

I’ve managed to clear out one error, it was likely a default formatting error, but I can’t figure out why I can’t clear the other.

The code reads:

Warning: React.jsx: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it’s defined in, or you might have mixed up default and named imports.

In my brain, I’m trying to import App from App.js, but when I change the import path to ‘./components/App/App’, the terminal throws a bunch of errors.

If the answer lies in a different part of the program, let me know if I should put the whole thing up on gitHub for further perusal.

Below are both my index.js, and far below, App.js.

Thank you!

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

ReactDOM.render(<App />, document.getElementById('root')); //THIS LINE is causing the error

// 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();

import React from 'react';
//import logo from './logo.svg';
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;
#2

This should be the jsx file, not css.

1 Like
#3

That’s what I thought!
When the path is ‘./components/App/App’, it throws even more errors

#4

Then what are they exactly?

#5

First off, thank you for your help.

Next, I was able to clear the two problems. No kidding, SearchBar contains links for two .jpg files, and they were saved on my HD as .jpeg files.

It is now compiling successfully, and it’s showing up in the browser, which is great. I’m getting new error, even though its rendering, and can’t parse what it means.

Screen Shot 2022-02-19 at 5.45.01 AM
Screen Shot 2022-02-19 at 5.45.01 AM2052×1150 373 KB

Thoughts?

Thank you again!

#6

The problem seems to be in your SearchBar component. Can you post the code?

#7 
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}>{sortByOption}</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 href='www.#.com'>Let's Go</a>
                </div>
            </div>
        );
    }
}


export default SearchBar;
#8

I think you should invoke that.

1 Like
#9

Wow, you stuck in there with me. I have an error free console for the first time in days. Have a wonderful and well-deserved weekend, hero.

Thanks again

1 Like
#10

Could you indicate the page address?