My React Cinema #16
My React Cinema #16
Conversation
…t back to App component
…n favourites star
| console.log(this.state.favouritesObject) | ||
| this.state.favouritesObject.hasOwnProperty('test')?delete this.state.favouritesObject.test:null | ||
| const favouritesKeys = Object.keys(this.state.favouritesObject); | ||
| this.state.favouritesArray = favouritesKeys.map(key => this.state.favouritesObject[key]) |
There was a problem hiding this comment.
don't assign to state directly, use setState
| } | ||
| this.setState({ | ||
| favouritesObject:favObject | ||
| },localStorage.setItem('reactFavourites', JSON.stringify(this.state.favouritesObject))) |
There was a problem hiding this comment.
You can remove the localStorage call from callback, by passing it favObject rather than this.state.favouritesObject
| React cinema app | ||
| <div className="app"> | ||
| <div className="top"> | ||
| <p className="top__favourites" onClick={this.showFavourites}>Favourites ({this.state.favouritesLength})</p> |
There was a problem hiding this comment.
rather than storing favouritesLength in state, it would be better to use Object.values(this.state.favouritesObject).length. That will ensure that you always working from the same source of truth rather than having to recalculate favouritesLength.
| // Create an array of favourites from favourites object. This is used to update the App/result state which will then show favourites instead of search | ||
|
|
||
| updateFavouritesArray() { | ||
| console.log(this.state.favouritesObject) |
There was a problem hiding this comment.
It looks like favouritesArray is only being used to favouritesLength. I'd say neither proeprty is needed in state as both can be produced from favouritesObject
| constructor() { | ||
| super(); | ||
|
|
||
| this.state= { |
There was a problem hiding this comment.
It looks like query is being stored both in Search and App. Rather than duplicating state it would be better to pass the query down as props from App into Search
|
Good work. There is some state duplication that can be avoided. Take a look at the comments for details |
2 participants
No description provided.