Ravenous Local Host Rendering Does Not Seem to Format Correctly


I have been working through the Ravenous project and everything seems to be working properly outside of the rendering. I inspected the code and CSS files to ensure that everything matched what I was given and or the proper solutions yet next to the three options above the search bars there is what looks like a bullet point to the left of each of them. As well, the colored title block bar does not extend from the top of the browser down to the search bar image and leaves white padding on each side. Looking to see if anyone else has encountered this and if it is an obvious oversight on my part that I keep looking over. I am at the end of Part 2 and here is my code for the search bar area. I believe this is where the issues are nested.

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>Let's Go</a> </div> </div> )} }; export default SearchBar;

Totally tossing this in…


Not a React writer, though I’ve seen the syntax. Line 14 makes me wonder.

Could you post a screenshot of the part that seems odd to you?
This is what mine looks like:

@mtf what makes you wonder about line 14?

It doesn’t look like a JSX object?

return <li key={sortByOptionValue}>{sortByOption}</li>;

As long as you have a single element in one line, you don’t need to wrap it in parenthesis. The Javascript is wrapped in curly braces – seems fine to me…

1 Like

I defer to your knowledge, and now rely upon your answer to the question…


@mirja_t see below!

Looks like you don’t have the reset.css styles applied:
Bildschirmfoto 2023-02-11 um 16.36.47

Mine are linked in the head of the index.html:

    <link href="./reset.css" rel="stylesheet" type="text/css">

Can’t remember having done that myself – I think that’s been done by CC and part of the preset. But I’m not sure as it’s quite a while ago that I did this project. Have a look at your index.html and check if reset.css is in the public folder.

1 Like

This was it! It was missing from the index.html and immediately solved the problem! Thank you so much for your help!

1 Like