Forem: Paul Vitalis

Routing with React Router

Paul Vitalis — Sun, 17 Mar 2024 01:30:19 +0000

Navigating through pages in a React application is made possible using a library called React Router Dom.

We will walk through Routing with an example.

First we will use vite to quickly spin up a React project.

npm create vite@latest

Enter your project name and select all options you would prefer when prompted.

Here is my preferred configuration.

Install all dependencies using npm install

To install react-router-dom, run the following command

npm i react-router-dom

Run the app using npm run dev

Create a components folder under the src directory and then create two components: Home and About inside the components folder.

ROUTING

For routing, create a folder called router under src and within it, create index.tsx.

Our folder structure should now look like this:

Now inside our router file, we will create routes for our Home and About pages as follows.

import { createBrowserRouter } from "react-router-dom";
import Home from "../components/Home";
import About from "../components/About";


const router = createBrowserRouter([
  {
    path: "/",
    element: <Home/>,
  },
  {
    path: "/about",
    element: <About />,
  },
]);

export default router;

Note that we imported createBrowserRouter from react-router-dom. This is the recommended router for all React Router web projects. It uses the DOM History API to update the URL and manage the history stack.

We then go to our App.tsx file and replace everything within it as follows.

App.tsx

import "./App.css";
import { Outlet } from "react-router-dom";

function App() {
  return (
    <>
      <Outlet />
    </>
  );
}

export default App;

You'll notice we imported Outlet from react-router-dom and added it in our return statement. An Outlet should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route. In this case, our parent route element is the App.tsx file and the child routes are Home.tsx and About.tsx

Lastly, we will update our main.tsx file with RouteProvider from react-router-dom

We import our router first and pass it into RouterProvider. All data router objects are passed to this component to render your app and enable the rest of the data APIs.

main.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import router from "./router/index.tsx";
import { RouterProvider } from "react-router-dom";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

Now if we go to the browser you can navigate routes between our two pages!

Home Page

About Page

That's all you need! Or is it?

Suppose you tried accessing a route like /home, what do you think will happen? Let's see.

Yikes! We had not specified a route for /home. We only put two routes: / and /about. To fix this, we can add a route to handle non-existent routes.

Firstly, create a component that will render whenever a user accesses a non existent route.

import React from "react";

const Error = () => {
  return <div>This is the error page</div>;
};

export default Error;

Next, we go to our router file, import the Error component we just created, and add a path to handle non-existent routes as follows:

 {
    path: "*",
    element: <Error />,
  },

And this is our result if we go to a non-existent route:

This tutorial is just a tip of the iceberg when it comes to React Router. I would encourage you to explore more and see what React router has to offer you. The full documentation of react-router can be found at: https://reactrouter.com/en/main

Follow me on:
LinkedIn: Paul Otieno
Twitter: me_huchoma
Instagram: paul_dreamer_

Happy Coding! 🥂

Implementing search in a React app

Paul Vitalis — Mon, 19 Feb 2024 12:36:42 +0000

In this article, we will look at implementing a search box in a React app.

The application is a quiz application that lists quizes.

A link to the working demo is here: https://quiz-react-ochre.vercel.app/

You can also access the stackblitz project here: Stackblitz

Source Code: https://github.com/Paulvitalis200/quiz-react

We would like to filter a specific quiz by searching for it using the search box.

Here is how the app looks:

The code for this is in the App.tsx file,

Firstly, we import our quizes from the quizes.json file:

import data from "./data/quizes.json";

First, we create an array for setting up our quizes and initialize the state with the quizes we've imported.

const [quizes, setQuizes] = useState<QuizInterface[] | null>(data);

We then create our search box

<Search placeholder="Search" onChange={searchQuiz}></Search>

You can see that we have a search input box. We also have an onChange event handler tied to it. To read about how to use onChange and more about it, you can read about it in my other article here - onChange article.

We also have the function searchQuiz that's tied to onChange.

It's defined here:

  const searchQuiz = (event: any) => {
    const filteredQuizes = data.filter((quiz: QuizInterface) =>
      quiz.name.toLowerCase().includes(event.target.value.trim().toLowerCase())
    );
    setQuizes(filteredQuizes);
  };

We use the .filter() method which is an in-built javascript method that filters an array to match a specific criteria and returns the array of items that matches the criteria.

The criteria we want to match is that the quiz's name includes the input value that the user types in. We get the value that the user types in using event.target.value.

We use .includes() which is also an in-built javascript method that determines whether an array includes a certain value among its entries, returning true or false as appropriate.

We use .toLowerCase() on the strings to convert all the text to lowercase before doing the comparison.

To ensure that the user does not enter spaces only, we use .trim() on the input text to remove any whitespace before they input an alphanumeric character and to ensure we do not filter when they only input spaces as the search parameter.

Finally, we set the value of our quizes state to be the filteredQuizes.

 setQuizes(filteredQuizes);

Important Note: We perform the filter on the original array of quizes that we imported (data) and not on the quizes array that we defined using useState. This is important because we will always be updating the quizes state and if we filter on this state array, we will reach a point where we may get erroneous data since we filtered out the original array items 😬.

And that's it!

Happy Coding 🥂

Follow me on:
LinkedIn: Paul Otieno
Twitter: me_huchoma
Instagram: paul_dreamer_

Tracking changes on inputs and textareas in React

Paul Vitalis — Sat, 17 Feb 2024 12:05:11 +0000

This post will cover how to track changes from an input field or text area. You can either follow along and write the code following the steps I will explain or just access the project on Stackblitz using the link I've provided and skip to the explanation.

Stackblitz project

1. Writing the code
We'll begin by creating a react app using vite

npm create vite@latest

Install all dependencies using:
npm install

Now in App.tsx, replace all the code with the following block of code



import { useState } from "react";
import "./App.css";

interface Note {
  id: number;
  text: string;
  backgroundColor: string;
  date: string;
}

function App() {
  const getRandomColor = (): string => {
    return "hsl(" + Math.random() * 360 + ", 100%, 75%)";
  };

  const [notes, setNotes] = useState<Note[]>([]);

  const [note, setNote] = useState<string>("");

  const [showModal, setShowModal] = useState<boolean>(false);
  const [showError, setShowError] = useState<boolean>(false);
  const addNote = () => {
    if (note.trim().length < 10) {
      setShowError(true);
      return;
    }

    setNotes([
      ...notes,
      {
        id: Math.random(),
        text: note.trim(),
        date: new Date().toLocaleDateString(),
        backgroundColor: getRandomColor(),
      },
    ]);

    toggleModal();
  };

  const handleChange = (event: any) => {
    setNote(event.target.value);
  };

  const resetForm = () => {
    setNote("");
    setShowError(false);
  };

  const toggleModal = () => {
    resetForm();
    setShowModal(!showModal);
  };

  return (
    <>
      {showModal && (
        <div className="modal">
          <div className="modal-content">
            <textarea
              className="text"
              onChange={handleChange}
              value={note}
            ></textarea>
            {showError && (
              <p className="error">Minimum characters allowed is 10</p>
            )}
            <div className="buttons">
              <button className="add-btn" onClick={addNote}>
                Add Note
              </button>
              <button className="close-btn" onClick={toggleModal}>
                Close
              </button>
            </div>
          </div>
        </div>
      )}

      <main>
        <div className="header">
          <h2 className="header-title">Notes</h2>
          <button className="add-note-btn" onClick={toggleModal}>
            +
          </button>
        </div>
        <div className="notes-container">
          {notes.map((note) => {
            return (
              <div
                key={note.id}
                className="note"
                style={{ backgroundColor: note.backgroundColor }}
              >
                <p className="note-text">{note.text}</p>
                <p className="note-date">{note.date}</p>
              </div>
            );
          })}
        </div>
      </main>
    </>
  );
}

export default App;

Update the App.css to be as follows



.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-note-btn {
  border: None;
  background-color: black;
  color: white;
  border-radius: 50%;
  padding: 10px 13px;
}

.add-note-btn:hover {
  cursor: pointer;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}


main {
  width: 80%;
  margin: 0 auto;
}

.notes-container {
  display: flex;
  flex-wrap: wrap;
}

.note {
  width: 200px;
  height: 200px;
  border-radius: 10px;
  margin-right: 15px;
  margin-bottom: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.note-text {
  height: 80%;
  overflow: scroll;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  word-wrap: break-word;
}

/* Hide scrollbar for Chrome, Safari and Opera */.note-text::-webkit-scrollbar {
  display: none;
}

.modal {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 40%; /* Could be more or less, depending on screen size */
  border-radius: 10px;
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.buttons {
  display: flex;
  flex-direction: column;
}

.buttons button {
  margin-top: 8px;
  color: #fff;
  border: none;
  padding: 5px 0;
  font-size: 18px;
  border-radius: 4px;
}

.buttons button:hover {
  cursor: pointer;
}

textarea {
  width: 100%;
  min-height: 100px;
  font-size: 18px;
}

.add-btn {
  background-color: purple;
}

.close-btn {
  background-color: rgb(133, 34, 34);
}

.error {
  color: red;
}

@media only screen and (max-width: 500px) {
  .modal-content {
    width: 80%; /* Could be more or less, depending on screen size */

  }
}

Finally, Update the index.css file too



:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  /* line-height: 1.5; */
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}


@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

Save all the changes and run your app with the following command:

npm run dev

Your application should now look as follows:

Our application is a notes app that allows us to add notes.

On clicking the + icon, we get a modal as follows:

2. Explanation.

The textarea field has an initial value set to the **note **variable that we created:



<textarea
              className="text"
              onChange={handleChange}
              value={note}
            ></textarea>

JavaScript allows us to listen to an input’s change in value by providing the attribute ** onchange**. React’s version of the onchange event handler is the same but camel-cased.

The handleChange function used on the onChange event handler was defined as follows:



 const handleChange = (event: any) => {
    console.log(event.target.value)
    setNote(event.target.value);
    console.log("Note: ", note)
  };

You can check the console and see the value that is logged out and also the value of the note as you type.

The handleChange function simply sets the note variable to be whatever text the user inputs as they type.

And that's it. On change is a very useful event handler and will simplify your work relating to user input on your React journey.

For the source code, you can access it at this link: Source code

Follow me on:
LinkedIn: Paul Otieno
Twitter: me_huchoma
Instagram: paul_dreamer_

Happy Coding! 🥂