Ravenous part 3

Hey!

at the end of the project, in the console this error shows up:

Line 73: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md jsx-a11y/anchor-is-valid

Line 73 points to the element. I included the event.preventDefault(); in the method so I’m not sure what the error is about

SearchBar.js

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 {
  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.handleTermChange.bind(this);
  }

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

  }

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

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

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

    event.preventDefault();
  }


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

  renderSortByOptions() {
    return Object.keys(sortByOptions).map(sortByOption => {
      let sortByOptionValue = 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}>Lets Go</a>
        </div>
      </div>
    );
  }
}

export default SearchBar;

thanks for the help!

Likely, it’s just a warning from your code editor regarding the <a></a> element not having a href attribute. I use Visual Studio Code, and get the same warning, but everything still runs fine. I’m not sure why they use the combination of <div><a></a></div> instead of a <button></button> with the same className and onClick attributes. Might be instructive to try changing it, and see what happens.

1 Like

Thanks for the reply! The error actually comes up in the ‘developer tools’

There should be a message logged but nothing shows up:

searchYelp(term, location, sortBy) {
    console.log(`Searching Yelp with ${term}, ${location}, ${sortBy}`);
  }

I did try to change it to button after looking up ways to troubleshoot it, but still the message doesn’t show.

Looks like you may have copied & pasted, and forgot to change the value for binding this to handleSearch :wink:
If I had a dollar for every time I made a similar boo boo…

1 Like

Oh boy :sweat_smile:

It worked! I always try to keep a look out for errors like these, they still slip by me for now…

Thanks so much for all the help!

1 Like