How to update texts in React

Good evening everyone, I am trying to create an online application to take quizzes in order to practice for exams. My problem is as follows:

I have the following ‘App’ component:

import { Disclosure } from "@headlessui/react";
import { Routes, Route, Link } from "react-router-dom";

import { classNames } from "./utility/utilities";

function App() {
    const navigationBar = [
        { nome: "Home", path: "/home" },
        { nome: "Corsi", path: "/corsi" },
        { nome: "Proponi Domanda", path: "/proponi-domanda" },
        { nome: "Statistiche", path: "/statistiche" },
        { nome: "Informazioni", path: "/informazioni" },
    ];

    return (
        <div className="min-h-full font-inter">
            <div className="bg-gray-800 pb-32">
                <Disclosure as="nav" className="bg-gray-800">
                    <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                        <div className="border-b border-gray-700">
                            <div className="flex items-center justify-between h-16 px-4 sm:px-0">
                                <div className="flex items-center">
                                    <div className="flex-shrink-0">
                                        <p className="uppercase text-white font-bold">Quiz App</p>
                                    </div>
                                    <div className="hidden md:block">
                                        <div className="ml-10 flex items-baseline space-x-4">
                                            {navigationBar.map((item) => (
                                                <Link key={item.nome} to={item.path} className={classNames(item.path === window.location.pathname ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white", "px-3 py-2 rounded-md text-sm font-medium")}>
                                                    {item.nome}
                                                </Link>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                                <div className="hidden md:block">
                                    <div className="ml-4 flex items-center md:ml-6"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Disclosure>
                <header className="py-10">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <h1 className="text-3xl font-bold text-white">{navigationBar.find((e) => e.path === window.location.pathname).nome}</h1>
                    </div>
                </header>
            </div>

            <main className="-mt-32">
                <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
                    <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
                        <Routes>
                            <Route path="/home" element={<h1>Home</h1>} />
                            <Route path="/corsi" element={<h1>Corsi</h1>} />
                            <Route path="/proponi-domanda" element={<h1>Proponi Domanda</h1>} />
                            <Route path="/statistiche" element={<h1>Statistiche</h1>} />
                            <Route path="/informazioni" element={<h1>Informazioni</h1>} />
                        </Routes>
                    </div>
                </div>
            </main>
        </div>
    );
}

export default App;

And its output is the following image:

Where as we can see, the active navbar element and the Home sign that is between the navbar and the component below corresponds with the path “localhost:3000/home”.

When I choose another navbar element such as Statistiche, the path changes correctly, but the element in the navbar doesn’t change the state or even the Home text. This only happens if I refresh the page.

Reading on the net, I see that useState() is used, I just don’t have any vague idea how to go about implementing this stuff! Please help me out! Thank you in advance for the trivial question, it would change my life if you could explain me how the mechanism works!

Answer

I solved the problem in the following way:

I’ve created a state variable:

const [pageName, setPageName] = useState(navigationBar.find((x) => x.path === window.location.pathname).nome);

That as soon as the page is loaded it deduces from the path the name of this.

Then inside the <Link > tag i’ve added, in the attribute onClick, the following lambda function onClick={() => setPageName(item.nome)}. So every time I click on another link the name is updated immediately (it changes his state).

Finally the file become:

function App() {
    const navigationBar = [
        { nome: "Home", path: "/home" },
        { nome: "Corsi", path: "/corsi" },
        { nome: "Proponi Domanda", path: "/proponi-domanda" },
        { nome: "Statistiche", path: "/statistiche" },
        { nome: "Informazioni", path: "/informazioni" },
    ];

    const [pageName, setPageName] = useState(navigationBar.find((x) => x.path === window.location.pathname).nome);

    return (
        <div className="min-h-full font-inter">
            <div className="bg-gray-800 pb-32">
                <Disclosure as="nav" className="bg-gray-800">
                    <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                        <div className="border-b border-gray-700">
                            <div className="flex items-center justify-between h-16 px-4 sm:px-0">
                                <div className="flex items-center">
                                    <div className="flex-shrink-0">
                                        <p className="uppercase text-white font-bold">Quiz App</p>
                                    </div>
                                    <div className="hidden md:block">
                                        <div className="ml-10 flex items-baseline space-x-4">
                                            {navigationBar.map((item) => (
                                                <Link key={item.nome} to={item.path} onClick={() => setPageName(item.nome)} className={classNames(item.path === window.location.pathname ? "bg-gray-900 text-white" : "text-gray-300 hover:bg-gray-700 hover:text-white", "px-3 py-2 rounded-md text-sm font-medium")}>
                                                    {item.nome}
                                                </Link>
                                            ))}
                                        </div>
                                    </div>
                                </div>
                                <div className="hidden md:block">
                                    <div className="ml-4 flex items-center md:ml-6"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Disclosure>
                <header className="py-10">
                    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <h1 className="text-3xl font-bold text-white">{pageName}</h1>
                    </div>
                </header>
            </div>

            <main className="-mt-32">
                <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">
                    <div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6">
                        <Routes>
                            <Route path="/" element={<Navigate to="/home" />}/>
                            <Route path="/home" element={<h1>Home</h1>} />
                            <Route path="/corsi" element={<h1>Corsi</h1>} />
                            <Route path="/proponi-domanda" element={<h1>Proponi Domanda</h1>} />
                            <Route path="/statistiche" element={<h1>Statistiche</h1>} />
                            <Route path="/informazioni" element={<h1>Informazioni</h1>} />
                        </Routes>
                    </div>
                </div>
            </main>
        </div>
    );
}

export default App;