Learning is an amazing process, and I enjoy keeping track of my challenges. Here are some things I have been or am still struggling with.
(11 Nov 2020, Working on React Photo Search app)
- I can’t get my “Loading…” message correct. React keeps using old state. However, I just placed the function that determines the loading message inside a final .then in my fetch(), and I think this solved the issue. In my SearchPhotos function, I created a loading message variable at the top of the function, then immediatly after set the state for loading and loadingMessage. Then, after the fetch is called and the pics have loaded, the loading message is evaluated with the function runLoadingMessage() which is called inside the final .then() . runLoadMessage checks the state, to see the length of ‘pics’ and the value of ‘query’. If query is blank, then the user is told to input something. Otherwise, if the pics array is empty, the user is told there were no results. If the pics array was not empty, the user is given a ‘load more’ button. It was not necessary to separate the loading message into a child component. In fact, it was not even necessary to have any logic in render(). All we did was destructure the loadMessage variable in render(), and passed the variable in brackets in the return() like so : {loadMessage}
- Once I removed all scroll settings, page still stayed at same scroll position when new images loaded. I was stunned. How could this be? I spent 2 hours last night trying to get the page to stay in the same scroll position on new images loading. I downloaded last nights version, and step-by-step made changes to create my current version. It turns out, the key is setting the state of the loadMessage before the unsplash.search API calll!!! Why is this? The simple setting of the loadMessage state to “Loading…” before the API call, makes the images load, but the page does not scroll.
(10 Nov 2020, Working on React Photo Search app)
- I couldn’t figure out why my npm packages were not showing up in my React project’s node_modules folder
- I couldn’t figure out why, on my React Photo Search app, that I couldn’t scroll back to a certain point on the page after the new images had loaded.