DEV Community: Tobi Ojuolape

A simple guide to Javascript event handling in React

Tobi Ojuolape — Sun, 06 Nov 2022 16:53:04 +0000

The main purpose of Javascript in web development is to handle interactions between the user and the web interface - what happens when a user fills a form or clicks a button? These interactions are usually handled through something called “Events” in Javascript, hence handling these events in the best way possible would lead to better interaction and optimize user experience.

An event handler is a simple form of Javascript code that is usually added to an HTML or JSX element to handle the interaction between the user and the frontend interface. Javascript has several event handlers which can be used for different purposes.

In this article, I would be highlighting some of the most important event handlers in Javascript and when to use them.

1) OnClick

This event handler controls interactions that occur when a user clicks an element on the interface. It is worth noting that although buttons are the most preferred elements to use with this event handler, any HTML element can have an onClick event handler.

An example implementation of the onClick event handler can be found below:

<div className="flex justify-center my-4">
          <img
            className="cursor-pointer"
            onClick={() => window.location.open('/')}
            src={Logo}
            alt="logo"
          />
        </div>

In the Javascript React code above, the onClick event handler is added to a logo image and redirects the user to the homepage of the app when clicked.

2) OnSubmit

This event handler controls form submissions, particularly when the enter button is pressed on a form element. To prevent the default behaviour of form submission which usually reloads the page, it is best to attach the onSubmit event handler as an onSubmit.prevent instead, or yet insert a prevent default function to disable the default behaviour of a submit event handler.

      <form onSubmit={(e)=>handleSubmit(e)}>
            <label>Name</label>
            <input onChange={(e)=>setName(e.target.value)}></input>
        </form>

3) OnChange

This event handler is typically used to detect changes made to an HTML input element and fire a function to update a data value based on this change. The target.value property of the event that fires usually contains the data needed. An example implementation of the onChange event handler can be found below:

import React from "react"

const [name,setName] = React.useState("")
function nameForm(){
return(
<label>Name</label>
<input type="text" onChange={(e)=>setName(e.target.value)}></input>
)
}

export default nameForm

In this react component, the onChange event handler is being used to set the value of the Name data upon every input.

4) OnKeyDown and OnKeyUp

These event handlers control when a key on the keyboard has been pressed. Its use is quite similar to the onChange event handler, however, the major difference is that both OnKeyDown and OnKeyUp also return the key that was pressed. Although OnKeyDown and OnKeyUp perform similar functions, a differentiator between the two is that OnkeyDown is fired when a button on the keyboard is pressed while OnKeyUp is fired when a button on the keyboard is released. As a result, the OnKeyDown event handler is faster and more commonly used than the OnKeyUp event handler.

An example implementation of OnKeyDown and OnKeyUp event handlers is displayed below:

import React from 'react'

const [name,setName] = React.useState("")

function dobForm(){
return(
<form onSubmit={(e)=>handleSubmit(e)}>
            <label>Date of birth</label>
            <input type="date"           
      onKeyDown={(e)=>setName(e.target.value)}></input>
        </form>
)}

export default dobForm

Conclusion

As Javascript provides a lot of options of handling events, it can get quite confusing to know which event handlers to use for a particular case. The general rule of thumb to follow in cases like this would be:

If your interaction is a "clicky" one, use the onclick event handler

If your interaction is an input form one, use the onSubmit event handler to handle it

If you would like to get data from a textfield/select field input, use the onChange event handler

You can also read up on more event handlers in Javascript by clicking here

A simple guide to consuming APIs with Redux (tutorial example)

Tobi Ojuolape — Mon, 26 Sep 2022 09:25:26 +0000

One of the advantages of Javascript frameworks that use flux pattern is the ease with which data can be passed from a parent component to a child component and vice versa. However, there are situations where the same data needs to be used by more than one parent component in a React app.

For instance, a React app that makes a get request to an endpoint to fetch data from a server – If the data received as a response is to be used by more than one page of the React app, how do we make this work? State management.

With state management, we can create a store that will serve as the “single source of truth” for all the data being used by multiple pages in our react app. Without state management, the developer would need to make independent API calls in each component that requires the data from the API and this approach is not ideal as it might result in:

Slow response time as each page would need to re-fetch the data for each page visit
Overloading of servers as they would be fulfilling multiple requests at the same time.

In this article, we’ll be building a react app that uses Redux to fetch user data from the Randomuser API, save the data in the store and makes it available to all components and pages within the react app.

Let’s get hacking!

Step 1: Create a React app

Open your command terminal, change to any directory of your choice, use the following command to create a new React app and name it redux-tutorial

npm create-react-app reduxtutorial

Now, cd into the newly created app in the code editor of your choosing. In this tutorial, I’ll be using VS Code.

Step 2: Install all the packages we need

Next, we will be installing all the packages we need to create and test our redux store:

1) react-redux and redux/toolkit packages to install the redux store in our React app
2) axios for API calls to the endpoint we would be making a GET request to for this tutorial
3) react-router and react-router-dom to create multiple routes in our React app to test if the state is indeed available in all routes and components.

To install all these required packages, enter the code below:

npm i @reduxjs/toolkit react-redux react-router react-router-dom axios

Afterwards, start your react app with: npm run start

Step 3: Create routes in our React app

Now that we have installed all required packages, let us create the two routes we would be using for the purpose of this tutorial:

Create a pages folder in your src folder and create two files within it: Home.js and Users.js
Afterwards, copy the following lines of code below into your App.js file

import './App.css';
import Home from './pages/Home';
import { BrowserRouter,Routes,Route } from 'react-router-dom';
import Users from "./pages/Users"

function App() {
  return (
    <BrowserRouter>
    <Routes>
    <Route path="/" element={<Home/>}/>
    <Route path="/users" element={<Users />} />
    </Routes>
    </BrowserRouter>
  );
}

export default App;

Step 4: Create a store in your app at src/store/store.js

Create a store with the following lines of code:

import { configureStore } from '@reduxjs/toolkit'

export const store = configureStore({
  reducer: {
    users:{}
  }
})

Step 5: Provide the Redux store to react so all the components can access it

After you have created your redux store, we need to use a Provider from the React Redux package to make the store available to all our routes and components. To do this, navigate to your index.js file and enter the following lines of code:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {store } from "./store/store"
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);
reportWebVitals();

Step 6: Create a Redux state Slice

As state values in redux cannot be altered directly within the component, we need to create a State slice that would perform our state changes on our behalf when fired as a function in a react component. As the data we want to store in our state comes from an asynchronous call to an API endpoint, we would be using axios to make the get request and then createAsyncThunk to enable the asynchronous function to fire and store a promise in the state, pending the time when the data arrives.

The initialState part of the Redux slice contains the initial state of our store. As we are making an asynchronous call, we would be adding a loading state which will change from false to true and true to false depending on whether data has been fetched successfully or not. We would also be using extraReducers to monitor our state change from pending to fulfilled to failed

To do this, create a new file called user.js in src/store folder and enter the following lines of code.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const initialState = {
  value: [],
  loading: false,
};

export const getUsers = createAsyncThunk("users/getUsers", async () => {
  try {
    const response = await axios({
      method: "GET",
      url: "https://randomuser.me/api/?gender=male&results=3",
      headers: {
        ContentType: "application/json",
      },
    });
    return response.data.results;
  } catch (error) {
    return error;
  }
});

export const usersSlice = createSlice({
  name: "user",
  initialState,
  extraReducers: {
    [getUsers.pending]: (state, action) => {
      state.loading = true;
    },
    [getUsers.fulfilled]: (state, action) => {
      state.loading = false;
      state.value = action.payload;
    },
    [getUsers.rejected]: (state, action) => [(state.loading = "failed")],
  },
});

export default usersSlice.reducer;

Step 7: Add Redux state slice to the store

Now that we have successfully written the logic to fetch our user data from the API, we need to connect our state slice to the store with the code below:

import { configureStore } from '@reduxjs/toolkit'
import user from './user'

export const store = configureStore({
  reducer: {
    users:user
  }
})

Step 8: Dispatch and Fetch Data from the Store in your React Component

Now, we are ready to fire a function within our react component that would fetch the data from the API, store it in the Redux store and make it available across every route. We would be using the useSelector and useDispatch package from Redux to do this.

Add the following lines of code to the Home.js file created earlier:

import React,{useEffect} from 'react'
import { useSelector,useDispatch } from 'react-redux'
import { getUsers } from "./../store/user"
import { useNavigate } from 'react-router'

function Home() {
  const users = useSelector((state) => state.users.value)
  const dispatch = useDispatch()
  const history = useNavigate()

  useEffect(()=>{
    dispatch(getUsers())
  },[dispatch])

  const gotonextpage = () =>{
    history('/users')
  }

  return (
    <div>
      <div>
        {/* {count} */}
        {users.map((user,i)=>(
            <div key={i}>
                <p>{user.name.title} {user.name.first} {user.name.last}</p>
                <img src={user.picture.large} alt="img"/>
            </div>
        ))}
        <button onClick={()=>gotonextpage()}>Go to users</button>
      </div>
    </div>
  )
}

export default Home

At this stage, your react app should look like this:

Step 9: Check for the state in another Route

By now, you should be seeing a list of 3 names and images on your home screen. This data is being fetched from the API and stored in redux. To confirm that the data is indeed available to other routes, let us add the following lines of code to the users.js file created in Step 3

In /src/pages/Users.js file

import React from 'react'
import { useSelector } from "react-redux"

function User() {
    const users = useSelector((state) => state.counter.value)
  return (
    <div>
        {users.map((user,i)=>(
            <div key={i}>
                <p>{user.name.title} {user.name.first} {user.name.last}</p>
                <img src={user.picture.large} alt="img"/>
            </div>
        ))}
    </div>
  )
}

export default User

If you followed all the steps correctly, you should be seeing the same list of users being displayed on the home screen on the users.js screen as well when you navigate to it by clicking the “Go to users” button on the home page.

[BONUS] Step 10: Install the Redux Devtools extension in Chrome

To properly track all your dispatches and state management in Redux, you can install the Redux Devtool extension to view changes being made to your state in real-time. Here is a screenshot of what the state for the tutorial we just did looks like:

Conclusion

In this tutorial, we were able to successfully make GET requests to an API, store the data fetched from the response within our store and make this data available to all the routes and components in our React app. You can view the repo for the code here and meddle with it as much as you want.

Happy Hacking ✌