I cannot get the webpage to display the information as intended. The backend retrieves the data from MongoDB properly, but it is not being retrieved/displayed entirely by the frontend.
Here’s my repo:
I’m using axios
I have an idea of where the error is but I am not sure.
ERROR in src/components/restaurants.js
Line 15:16: 'useParams' is not defined no-undef
Search for the keywords to learn more about each error.
webpack 5.71.0 compiled with 1 error and 1 warning in 58 ms
What can I do about these warnings when I inspect the webpage? Should I be worried about as a (trying to become) developer?
Warning: Each child in a list should have a unique "key" prop.
Check the render method of `RestaurantsList`. See https://reactjs.org/link/warning-keys for more information.
option
RestaurantsList@http://localhost:3000/static/js/bundle.js:426:88
Routes@http://localhost:3000/static/js/bundle.js:42791:7
div
div
Router@http://localhost:3000/static/js/bundle.js:42728:7
BrowserRouter@http://localhost:3000/static/js/bundle.js:41534:7
App@http://localhost:3000/static/js/bundle.js:45:72
The Layout of my webpage is very different to that of the tutorial. The fields are very close to each other. On the log-in page the button and the two fields are very close. Is there any particular reason for this? What can I do about it?
I’ve tried the Bootstrap spacing classes, and they work, kinda. Well I was doing the wrong way at first, like this class="mb-3" className="my-1 form-group"
When I did it like this, the elements would go back to their original position whenever the page was refreshed.
I messed around a bit and the correct way seemed to be like this: <div className="form-group my-1">