myreads | final assessment project for Udacity 's React Fundamentals | Frontend Framework library

Ok,

this one was to be simple, but I am a couple of hours here trying to figure out how could I solve this issue.

First of all, I'm doing a React course, and I'd submitted the project the second time for the reviewer avaliation. Certainly is not the same reviewer and he/she has asked me to take other modifications different to the previous one.

The fact is that, the component was working properly, but the reviewer has suggested me to transform the component which was a Class Component into a Function Component and there was where my problem has started.

Please, I appologize but I'll have to put the entire stateless component code (which is a little big, I think), to explain next what is happen:

preface: I'm still getting used to ES6 and working on my first React App via an online class. I'll share my issue here and my git repository for anyone who's willing to dig into it. The app allows you to search and organize books in different categories.

The error: Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined at Object.mergeShelfAndSearch (BookUtils.js:22) at Search.js:41 BookUtils.js exports a couple of functions to React components (not sure how it knows where to go, but it works). The Search.js component handles the search functionality. While testing I'll search for something that doesn't exist(i.e 'zzzzz'). When I type something that I know exists I get the error above.

Code in BookUtils.js :

I have a very large text file, myReads.sam, that looks like this:

I have two views/components in my React app that render books for a user. In ListBooks it takes a set of 'books' on the users list and renders them left to right on the relevant shelves. This works ok.

The issue is on the SearchBook component. When a user enters a search string I want to display results left to right without going off the screen.

The book objects themselves are rendered by the Book.js component.

Like so: xxxx xxxx xxxx

What I have currently is they are displaying one after the other on top of each other:

x x x

How do I display this correctly?

There's a fair amount of code so I've put the app itself in CodeSandBox as well as extracts in this post.

It will give you an error when you navigate to it but just click on the yellow tab in the sandbox's browser view and the app will work normally. The SVGs on the green buttons don't seem to render either but they are just for navigation.

ListBooks.js

I have an app that lists books on a users shelf and then on a subsequent search page. The user goes to the search page, finds a title and selects a shelf for the title to be shelved on. When they go back to the home page this title should then show on the correct shelf.

The functionality works in that the changes are made to the objects, but when I click on the home button or back button in the browser the changes do not show until I have refreshed the browser.

What do I need to do to ensure this change is shown when the user browses to the home page?

I've put the bulk of the code into Codesandbox

App.js

I have a basic React app with a function in the App.js component to pass down as a prop for subsequent components to handle moving a book between shelves.

When I pass the function down one level, from App.js to ListBooks.js to be passed on the Books.js component which is where the user will select the new shelf and trigger the API call and state update, this works fine.

However when I then try to do the same from App.js > SearchBooks.js > Book.js it does not seem to work.

What I expect is for the updateShelf function to be called to update the book and the state.

Apologies for 'wall of code' if there's too much there, just not sure exactly where the issue is.

EDIT:

As suggested in comments, here is a CodeSandbox version: https://codesandbox.io/s/github/richardcurteis/myreads-udacity

App.js

I am making a project in which I must get result from API. And I have a problem because when the result of my query is empty, then the error is occur:

`Book.js:10 Uncaught (in promise) TypeError: Cannot read property 'thumbnail' of undefined'

This is my code in component with search:

I am having an issue with a React app that I am trying to make. The app is supposed to display a list of books in shelves and then be able to move the books between shelves.

The problem I have at the minute is that the updateShelf function is not being called when the shelf is selected and onUpdateShelf is called which is where the change should be made and the state updated.

I have added console.log('Test'); to updateShelf but can't see anything in the console when the dropdown is clicked.

There are no errors in the console.

App.js

I am working on my first React project, a project as part of a Udacity course.

The task (or this part of it) is to initially render a series of book objects horizontally in three shelves.

I have managed to render the shelves and the books within them, however the books within each shelf are being rendered top to bottom rather than left to right.

One of the solutions I have seen posted is to use display: inline; in the CSS file but I have done that with no success.

How can I fix the code so that books within shelves are rendered horizontally?

I have included the ListBooks.js and App.css files. Let me know if I need to add anything else.

ListBooks.js