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;
