Ravenous part 3 - failed to compile

I have been stuck on part 3 of the ravenous project. I followed the video step by step and still get a “failed to compile” error. The exact error is: Line 58:34: Parsing error: Unexpected token, expected “,”
Failed to compile.

Using the inspector in the browser I’m seeing another error:

index.js:1375 Warning: Each child in a list should have a unique “key” prop.

When I look at the element in the inspector it says: accessKey: “”

I understand that each key should be unique but the code looks to me like it should be cycling through using the map function and assigning a unique key.

After a few hours of beating this up, I finally threw in the towel and looked at the solution files. I still couldn’t see where I was going wrong. Throwing in the towel even further, I copied the entire text from the SearchBar.js solution into my file and I still get the same error.

I have checked to make sure every bracket matches up and every paren pairs up. I feel like I’m missing some simple syntax problem but I’m not sure how to find it at this point. Any suggestions on how to go about troubleshooting this (or other similar problems related to syntax?) I know, even more important than finding the exact error, I need to figure out how to pinpoint these things on my own. In addition to advice on this specific problem, advice on how to methodically troubleshoot these types of errors would also be much appreciated!

Thanks in advance for anything you can offer.

Here’s the code I ended up copying from the solution that still fails:

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

class SearchBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      term: '',
      location: '',
      sortBy: 'best_match'
    };

    this.handleTermChange = this.handleTermChange.bind(this);
    this.handleLocationChange = this.handleLocationChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    

    this.sortByOptions = {
      'Best Match': 'best_match',
      'Highest Rated': 'rating',
      'Most Reviewed': 'review_count'
    };
  }

  getSortByClass(sortByOption) {
    if (this.state.sortBy === sortByOption) {
      return 'active';
    }
    return '';
  }

  handleSortByChange(sortByOption) {
    this.setState({sortBy: sortByOption});
  }

  handleTermChange(event) {
    this.setState({term: event.target.value});
  }

  handleLocationChange(event) {
    this.setState({location: event.target.value});
  }

  handleSearch(event) {
    this.props.searchYelp(this.state.term, this.state.location, this.state.sortBy);

    event.preventDefault();
  }

  renderSortByOptions() {
    return Object.keys(this.sortByOptions).map(sortByOption => {
      let sortByOptionValue = this.sortByOptions[sortByOption];
      return (<li className={this.getSortByClass(sortByOptionValue)}
                  key={sortByOptionValue}
                  onClick={this.handleSortByChange.bind(this, 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" onChange={this.handleTermChange} />
          <input placeholder="Where?" onChange={this.handleLocationChange}/>
        </div>
        <div className="SearchBar-submit">
          <a onClick={this.handleSearch}>Let's Go</a>
        </div>
      </div>
    );
  }
}

export default SearchBar;

Presumably your error message says which file it’s got an issue with

Yes, sorry to leave that out. SearchBar.js.

This is the link to the project: https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/ravenous-part-three/projects/setting-searchbar-state

The error message is for this file? I’m not convinced.

The project in the solution does compile, so copying a file from the solution really just says it isn’t that file.

Maybe you could share project, it’s not one file so one file isn’t enough to get a look at it. https://send.firefox.com/

Well, I closed everything down and stepped away for a while after my last post. Just restarted the app and it came up perfectly. Replaced the solution code with my code (basically the same with some spacing differences) and it compiles perfectly too. So maybe the moral is, when all else fails stop and restart everything? I’m still wondering what happened but at least I know the code I was working on was correct. I’m certainly a lot more familiar with it after going through it for so long! Thank you for taking the time to look at it. I really do appreciate you.

You might have lost that information while changing things, this is one case where version control is really useful. You can save what you have and then poke at things. If you by some magical miracle get it working you can compare the current state to what you started out with.

IDK about react/node but yes there are cases where resetting does help, typically involving invalid caches. But you did several things so you can’t say it was a particular one that fixed it unless you have the ability to go back and forth between versions (which you can with version control)

If anything I’d say it’s more likely it was one of your file changes, seeing as the error message was complaining about something being invalid code. If I was to guess further then maybe the part of the error message that you did not show was actually telling you it was a different file from what you were looking at.