Hi, After completing Ravenous part three I am getting a blank web page. I have gone through the help video and solution code and as far as I can tell my code is the same yet I am getting nothing. Also I am getting a error I dont understand on my terminal.
The error.
Compiled with warnings.
[eslint]
src/components/SearchBar/SearchBar.js
Line 70:11: 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: eslint-plugin-jsx-a11y/anchor-is-valid.md at 93f78856655696a55309440593e0948c6fb96134 ¡ jsx-eslint/eslint-plugin-jsx-a11y ¡ GitHub jsx-a11y/anchor-is-valid
Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.
SearchBar.js
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',
'Hightest Rated': 'rating',
'Most Reviewed': 'review_count'
};
}
getSortByClass(sortByOption) {
if (sortByOption === this.state.sortBy) {
return 'active';
}
return '';
}
handleSorByChange(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 onChange={this.handleTermChange} placeholder="Search Businesses" />
<input onChange={this.handleLocationChange} placeholder="Where?" />
</div>
<div className="SearchBar-submit">
<a onClick={this.handleSearch}>Let's Go</a>
</div>
</div>
}
}
export default SearchBar;
App.js
import React from âreactâ;
import â./App.cssâ;
import SearchBar from ââŚ/SearchBar/SearchBarâ;
import BusinessList from ââŚ/BusinessList/BusinessListâ;
const business = {
imageSrc: âhttps://content.codecademy.com/programs/react/ravenous/pizza.jpgâ,
name: âMarginOtto Pizzeriaâ,
address: â1010 Paddington Wayâ,
city: âFlavortownâ,
state: âNYâ,
zipCode: â10101â,
category: âItalianâ,
rating: 4.5,
reviewCount: 90
}
const businesses = [
business,
business,
business,
business,
business,
business
]
class App extends React.Component {
searchYelp(term, location, sortBy) {
console.log(Searching Yelp with ${term}, ${location}, ${sortBy})
}
render() {
return (
ravenous
export default App;
