DEV Community: Olabisi Olaoye

How to Pass Data Across Routes with React Router

Olabisi Olaoye — Sat, 26 Aug 2023 20:05:40 +0000

URL parameters are a good way of passing data from page to page in a React application. But what if you don't want that data to show in your URL? Here's a great way to achieve that using the useLocation hook that React Router provides. If you're new to how React Router works, you can check out their docs for more information.

In this tutorial, we'll be persisting an object in our navigation to another page that looks like this:

{
  id: 123,
  name: 'Jane Doe'
}

Step 1: Installing dependencies

If you're using npm, run this command to install React Router in your application:

npm install react-router-dom

If you're using Yarn, do this:

yarn add react-router-dom

Step 2: Route Setup

In your App.js file, you'll have to define each route in your application. For simplicity, we'll be defining two routes, one for each page.

import React from 'react';
import Page1 from './Page1';
import Page2 from './Page2';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path={'/'} element={<Page1/>}/>
        <Route path={'/page2'} element={<Page2/>}/>
      </Routes>
    </Router>
  );
}

Note that a Route component must have a parent Routes component to wrap it.

Step 3: Passing Data to Page

In the component for the first page, we define an object to be passed to the next page. We'll be using React Router's Link component for this, which is pretty similar to rendering an <a> tag. The Link component has a state prop where we can pass in our state without it being encoded in the URL.

import React from 'react';
import { Link } from 'react-router-dom';

export default function Page1() {
  const routeState = {
    id: 123,
    name: 'Jane Doe'
  }

  return (
    <div>
      <h1>React Router Demo</h1>
      <Link to='/page2' state={routeState}>Next page</Link>
    </div>
  )
}

Step 4: Retrieving the State in the Next Page

Now that we've passed in our state, we can retrieve it in the destination route by using the useLocation hook. useLocation returns an object with information about the current URL, including the state property. On the destination page, we can simply refer to that state from the hook:

import React from 'react';
import { useLocation } from 'react-router-dom';

export default function Page2() {
  const location = useLocation();

  const id = location.state.id;
  const name = location.state.name;

  return (
    <div>
      <h1>Page 2</h1>
      <div>ID: {id}</div>
      <div>Name: {name}</div>
    </div>
  )
}

That's it! There are other ways of passing data between pages in React, of course, but this is definitely a good option if you don't want to add any parameters to your URL. You can also view the Stackblitz demo and play around with more routing options.

Please leave me a comment or reaction to let me know if this post helped. Thank you for reading!

File Validation in React with Formik and Yup

Olabisi Olaoye — Sun, 06 Aug 2023 15:54:24 +0000

Dealing with forms in React applications used to be tedious, but with libraries like Formik and Yup, handling form state and validating each field is much easier and efficient. Formik does the overall form management and Yup helps to define the structure and rules to be applied to the form.

When working with file inputs, schema building and validation is not as straightforward as validating a text field, for example. This guide will show how to implement that in a React application.

Step 1: Installing Dependencies

To install Formik and Yup, run this on your command line:

npm install formik yup

If you're using yarn, do this instead:

yarn add formik yup

Step 2: Handling Form State

The form should consist of a field with an input of type 'file' and a submit button. At this point, the form looks like this:

const MyForm = () => {
  return (
    <form>
      <input type='file' name='myFile' accept='.pdf'/>
      <button type='submit'>Submit Form</button>
    </form>
  )
}

export default MyForm;

There are different ways to handle form state with Formik, but in this guide we'll be using the useFormik hook to directly provide all the Formik helpers needed. Here we can define the initial values of the input field, what happens when the form is submitted, and a validation schema.

import { useFormik } from 'formik';

const MyForm = () => {
  const formik = useFormik({
    initialValues: {
      myFile: ''
    },
    onSubmit: () => {
      console.log('Form submitted!')
    }
  })
  return (
    <form>
      <input type='file' name='myFile' accept='.pdf'/>
      <button type='submit'>Submit Form</button>
    </form>
  )
}

export default MyForm;

Step 3: Building the Validation Schema

Next, import Yup into the file to define the set of rules you want the form field to obey. In this guide, we'll be validating the file input in two aspects:

The field must be required
The file must only accept PDF files
The file size must not be more than 3 megabytes

Here's what the validation schema looks like:

import * as Yup from 'yup';

const validationRules = Yup.object().shape({
    myFile: Yup.mixed().required('required')
      .test('fileFormat', 'Only PDF files are allowed', value => {
        if (value) {
          const supportedFormats = ['pdf'];
          return supportedFormats.includes(value.name.split('.').pop());
        }
        return true;
      })
      .test('fileSize', 'File size must be less than 3MB', value => {
        if (value) {
          return value.size <= 3145728;
        }
        return true;
      }),
  })

When validating the file type, we use the test function to determine whether the file extension is .pdf. We also have to test if the file size is not more than 3,145,728 bytes (3 megabytes).

Step 4: Displaying Errors in Field

We intend to display the validation errors below the field, so we render a paragraph just below the file input:

<form onSubmit={formik.handleSubmit}>
      <input type='file' name='myFile' accept='.pdf' onChange={handleChange}/>

      <div>{(formik.errors.myFile) ? <p style={{color: 'red'}}>{formik.errors.myFile}</p> : null}</div>
      <br/>
      <button type='submit'>Submit Form</button>
    </form>

To make sure that Formik is actually in charge of the field's state, a function is passed to the input's onChange property. The function sets the value of the field to Formik's state by using the helper function setFieldValue, a function Formik provides to set a field's value to something. It takes two arguments: the name of the field and the value to be set. The onChange function looks like this:

const handleChange = (e) => {
  formik.setFieldValue('myFile', e.target.files[0]);
};

The result of this is that the file is validated every time its value changes and when the form is submitted. Also, Formik's handleSubmit helper function is passed into the form element's onSubmit property. This will trigger Formik's own onSubmit function.

Here's the complete code:

import React from "react";
import { useFormik } from "formik";
import * as Yup from 'yup';

const MyForm = () => {
  const validationRules = Yup.object().shape({
    myFile: Yup.mixed().required('required')
      .test('fileFormat', 'Only PDF files are allowed', value => {
        if (value) {
          const supportedFormats = ['pdf'];
          return supportedFormats.includes(value.name.split('.').pop());
        }
        return true;
      })
      .test('fileSize', 'File size must not be more than 3MB', 
      value => {
        if (value) {
          return value.size <= 3145728;
        }
        return true;
      }),
  })

  const formik = useFormik({
    initialValues: {
      myFile: ''
    },
    onSubmit: () => {
      console.log('Submitted')
    },
    validationSchema: validationRules,
  })

  const handleChange = (e) => {
    formik.setFieldValue('myFile', e.target.files[0]);
  };
  return (
    <form onSubmit={formik.handleSubmit}>
      <input type='file' name='myFile' accept='.pdf' onChange={handleChange}/>

      <div>{(formik.errors.myFile) ? <p style={{color: 'red'}}>{formik.errors.myFile}</p> : null}</div>
      <br/>
      <button type='submit'>Submit</button>
    </form>
  )
}

export default MyForm;

That's it! You can check out the code output on Stackblitz here. Thank you for reading, and please let me know of your thoughts about this article.

How to Build a Global Notification System in React

Olabisi Olaoye — Sun, 30 Jul 2023 17:57:51 +0000

Notifications are an integral part of a well structured React web application, especially when the user expects some form of feedback from completing a task or making a request. There are many ways of achieving this, but this article will be centered on building a simple notification component with Material UI. Material UI is a component library for React applications that makes frontend development easier, and it's a good option if you don’t want to build design components from scratch.

The goal of this guide is to be able to call a function to display the notification like this:

showNotification({type: ‘success’, message: ‘Hey there!’})

This tutorial will be adopting TypeScript, so this component is suited for TypeScript projects. You can learn more about TypeScript here.

Installing the dependencies

First, install Material UI in your React application. If you're installing with npm, do this on your command line:

npm install @mui/material @emotion/react @emotion/styled

If you’re using Yarn, then do this:

yarn add @mui/material @emotion/react @emotion/styled

Creating Types and Interfaces

Create a file in the src folder of your project. We can call it notificationDemo.tsx. And with the function call of the notification component, we know that we want to pass in an object as an argument. This object should contain the type of the notification (e.g success, error, info) and the message to be displayed. A more effective way to define the notification types would be to store each one in a type like this:

//add as many message types as you want
type MessageType = ‘success’ | ‘error’ | ‘warning’ | ‘info’;

Then create an interface, NotifyProps to specify how that object will look:

interface NotifyProps {
  type: MessageType,
  message: string
}

Creating the Component

Now all that's left is creating the component itself. It will render the Material UI Snackbar component. Here's the final result:

const showNotification = ({ type, message }: NotifyProps) => {
    const container = document.createElement('div');
    document.body.appendChild(container);

    ReactDOM.render(
      (
    <Snackbar 
          anchorOrigin={{ vertical: 'top', horizontal:'right' }}
          open={true} 
          sx={{position: 'fixed', zIndex: 1500}}
    >
      <Alert severity={type} sx={{ width: '100%' }}>
          {message}
      </Alert>
    </Snackbar>


),
      container
    );

    setTimeout(() => {
      document.body.removeChild(container);
    }, 5000);
  };

  export default showNotification;

Note that the ReactDOM.render function renders the component onto the page. The setTimeout function determines how long it stays on the page before it disappears.

That’s it! You can call the showNotification function anywhere in your application and it will render on the page.

Please leave me a comment or reaction to let me know if this post helped. Thank you for reading!

Using React Query with TypeScript

Olabisi Olaoye — Tue, 11 Jul 2023 20:32:51 +0000

When retrieving data from an API (application programming interface) in React, it's always important to do so in the most suitable way for your application. But because there's more than one way to do it, it proves to be problematic. (Throw in TypeScript and it gets even more complicated.) Many developers have acquainted themselves with React Query, a library that simplifies data fetching and state management.

More Resources

Using TypeScript with React Query takes the developer experience further by ensuring that the request and response from the API is properly defined. Plus, it saves you from unprecedented runtime errors that JavaScript may not notice. Let's try fetching some data from an online fake API.

First, we install the React Query package (for data fetching) and the Axios package (for making HTTP requests).

npm i @tanstack/react-query axios

Say we want to get all posts from the API. That means we are making a GET request. When we look at the response, it's an array of objects like this:

[
  {
    "userId": 1,
    "id": 1,
    "title": "Mary had a little lamb",
    "body": "Mary had a little lamb whose fleece was white as snow."
  },
  ...
]

From this data, we can create an TypeScript interface to infer what type of data we're looking to receive. It'll look something like this:

interface Posts {
  userId: number;
  id: number;
  title: string;
  body: string;
}

In our component, we create an asynchronous function to make the request. Asynchronous functions always return a Promise, but we will take advantage of TypeScript by infering the Posts[] type on the Promise. This ensures that TypeScript knows what kind of data we're going to get.

const getPosts = async (): Promise<Posts[]> => {
  const posts = await axios.get('https://jsonplaceholder.typicode.com/posts')?.data;
  return posts;
}

Now we can make proper use of React Query by using the useQuery hook.

const {data, isLoading, isError} = useQuery({
  queryKey: ['get-posts'],
  queryFn: getPosts
})

Note that we destructured the hook into an object with the properties above.

data represents the response from the API call.
isLoading is a boolean value which is true when there is no ongoing query attempt.
isError is a boolean value which is true when there was an error fetching the query.

There are many more properties we can use for different functions, but we'll stick with these three for this example.

Given the isLoading and isError properties, we can decide what to render to the browser at each state of the data fetching process. Here's what the whole code looks like:

export default function Posts() {
  const getPosts = async (): Promise<Posts[]> => {
    const posts = await axios.get('https://jsonplaceholder.typicode.com/posts')?.data;
    return posts;
  }
  const {data, isLoading, isError} = useQuery({
    queryKey: ['get-posts'],
    queryFn: getPosts
  })

  if (isLoading) {
    return <div>Loading posts...</div>
  }

  if (isError) {
    return <div>Oops!</div>
  }

  return (
    <div>
    {data?.map((post) => (
      <p key={post.id}>{post.body}</p>
    ))}
    </div>
  )
}

It's important to note that when familiarizing yourself with a library, the documentation is the best place to begin. There you can discover more techniques to solving a problem and how to apply them in different use cases.