Ravenous (Part3) - 2021 CSS not updating

Hi All

I’m busy with the Ravenous Part 3 exercise and everything ‘seems’ to be working. However, I got stuck when I noticed that my CSS for the filter links wasn’t updating (orange) despite having combed through the forums and questions and the video walkthrough I noticed that the version on the video (and in some of the forum is different (maybe older).

The main difference is that I have to move the sortByOptions object into the SearchBar class and update it using this

So instead of

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

It now reads

this.sortByOptions = {
   ...
}

I’ve updated the renderSortByOptions to reference these objects with this but when I run the ‘active’ status is not being registered and I also notice that the initial state is not there either.

Here is my code:

import React from 'react'; import './SearchBar.css'; class SearchBar extends React.Component { constructor(props) { super(props); this.state = { term: '', location: '', sortBy: 'best_match', } this.sortByOptions = { 'Best Match': 'best_match', 'Highest Rated': 'rating', 'Most Reviewed': 'review_count' } this.handleTermChange = this.handleTermChange.bind(this) this.handleLocationChange = this.handleLocationChange.bind(this) } getSortByClass(sortByOption) { return sortByOption === this.state.sortBy ? 'active' : '' } renderSortByOptions() { return Object.keys(this.sortByOptions).map( sortByOption => { let sortByOptionValue = this.sortByOptions[sortByOption]; return (<li key={sortByOptionValue} className={this.getSortByClass(sortByOption)} onClick={this.handleSortByChange.bind(this, sortByOptionValue)} >{sortByOption}</li>) }) ; }

you can see below that there is no highlighting of the menu items.


c

Hi,
you map the keys of your sortByOptions object:

return Object.keys(this.sortByOptions)

The keys are:

'Best Match'
'Highest Rated'
'Most Reviewed'

Your state sortBy stores the values:

'best_match'
'rating'
'review_count'

So your getSortByClass method expects these values as argument:

getSortByClass(sortByOption) {

      return sortByOption === this.state.sortBy ? 'active' : ''

    }

But since you mapped the keys, you also pass a key as argument:

className={this.getSortByClass(sortByOption)}

Thank you for the response.

I understand what you’re saying and it’s what I have concluded myself. but I have no idea how to fix it, and this is also the direction the project instructed me to follow. That being said I could have totally missed a detail but I’m pretty sure I haven’t.

I used Object.entries() for this task. It gives you both the key and the value as an array.
You can still use Object.keys(), but then you have to reference the sortByOptions object to get the related value to your mapped item.
Edit: You do not need to pass the index in case you stick to Object.keys as I wrote earlier since you can reference the property with the key you map:

sortByOptions[sortByOption]
1 Like

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.