MERN tutorial Chapter: Create React Frontend

JavaScript
42

When doing major version updates of libraries you can’t expect old code to work (e.g. from 5.2.0 to 6.2.0).

Again, I would suggest when following a tutorial that you always try to use the same version of libraries as used in the tutorial. That is, if you want to be able to use the same code and reference code in the video and source repo. Tutorials really should provide starter code repos for this very reason and not just finished code repos.

I’d also suggest looking at the YouTube comments. I seem to remember there was missing code in the video (DAO injectdb method call).

43

I am running into issues again:

There is no text for the buttons only when I click on Login

44

I have fixed it Fixed.

46

@kevinSmith
@adramelech
@DanCouper
@lasjorg

Hi again. Can someone please tell me why my webpage looks different from the intended look here?

MY repo can be found here:

Edits were done before “Edited restaurant-list file”

Thanks in advance

47

Hmmm, I’ve only managed to display the Cuisine list but nothing is displayed on the page, e.g. If I choose American then all the restaurants in this category should be displayed, but the page is still blank.

48

I need help with this too, I can’t seem to get anything on the page but there are no errors.

49

See if you can find the solution using useParams() here from @lasjorg :

Do you have a repository other where others can look at your code to see what the problem is?

50

Thanks! I worked through the problem, but now I can’t see anything when I click view reviews. I’m getting this error:

Matched leaf route at location "/restaurants/5eb3d668b31de5d588f4292c" does not have an element. This means it will render an <Outlet /> with a null value by default resulting in an "empty" page.
warning @ router.ts:11
useRoutes @ hooks.tsx:353
Routes @ components.tsx:256
renderWithHooks @ react-dom.development.js:16141
updateFunctionComponent @ react-dom.development.js:20313
beginWork @ react-dom.development.js:22356
beginWork$1 @ react-dom.development.js:27219
performUnitOfWork @ react-dom.development.js:26392
workLoopSync @ react-dom.development.js:26303
renderRootSync @ react-dom.development.js:26271
performSyncWorkOnRoot @ react-dom.development.js:25924
flushSyncCallbacks @ react-dom.development.js:11982
(anonymous) @ react-dom.development.js:25490
51

I am trying to follow the tutorial in React 6. Here are my notes so far and some example code that covers:

  • instead of
  • useParams() instead of passing props
  • UserContext to manage user
  • not use render()

I do NOT have login working yet. Please post if you figure it out!

App.js - wrap everything in a <UserContext.Provider> tag. This lets everything underneath it access the user object. (Note that you can use UserContext for many things. It’s just a coincidence that I am using it to store the user.)

import React from "react"
import { Routes, Route, Link } from "react-router-dom"
import "bootstrap/dist/css/bootstrap.min.css"

import Login from './components/login'
import RestaurantsList from "./components/restaurants-list";
import Restaurant from "./components/restaurant";
import AddReview from "./components/add-review";

export const UserContext = React.createContext(null)

function App() {
    const [user, setUser] = React.useState(null);

    async function login(user = null) {
        setUser(user);
    }

    async function logout( ) {
        setUser(null);
    }

    return (
        <UserContext.Provider value={user}>
        <div>

Then in restaurant.js you get the restaurant id and user like this:

import React, { useState, useEffect } from "react";
import RestaurantDataService from "../services/restaurant"
import {Link, useParams} from "react-router-dom";
import {UserContext} from "../App";

function Restaurant() {

    const routeParams = useParams();
    console.log(JSON.stringify(routeParams))
    const user = React.useContext(UserContext);
    console.log(user && user.id)
    console.log(JSON.stringify(user))

Lastly your routes should look more like this. I have not finished converting this to the new, more flexible arrangement:

            <Routes>
                <Route path="/" element={<RestaurantsList />}></Route>
                <Route path="/restaurants" element={<RestaurantsList />}></Route>
                <Route path="/restaurant/:id" element={<Restaurant />} />
                <Route exact path="/restaurants/:id/review"
52

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