DEV Community: ISIAKA ABDULAHI AKINKUNMI

Getting Started With Redux-ToolKit (RTK)

ISIAKA ABDULAHI AKINKUNMI — Sat, 31 Dec 2022 17:08:57 +0000

Managing state is an important aspect of React, For a smaller project, using useState or useReducer is a good way to manage state. But as the application grows complex, we need an efficient way to handle it, React-Redux provides us with global state management and in this article we will explore the concept of state management using Redux-ToolKit (RTK).

Table of Content

Introduction
What is React-Redux?
Installations
Setting Up
- ConfigureStore
- Wrap our App with Provider from React-Redux
- CreateSlice
  - todoSlice.js
    - Add Todo action
    - Delete Todo action
    - Update Todo action
Todo App
- Get Initial State
- Add a todo
- Delete a todo
- Update a todo

Introduction

When an action is performed,a state change is expected to happen and trigger the rendering of UI. Managing state can be done using a useState or useReducer, It could be complex especially if those components are located in different parts of the application. Sometimes this can be solved by "lifting state up" to parent components, but that doesn't always help.

One way to solve this is to extract the shared state from the components, and put it into a centralized location outside the component tree where any component can access the stateor trigger actions, no matter where they are in the tree. This is the first of three articles. Other articles are

In those articles, I will explain how to use RTK queries to make API calls in efficient ways rather than installing other packages, I will also explain redux-persist as an alternative to saving to persist our state or save with details in our App. see you soon.

What is React-redux

React-Redux is a popular JavaScript library that helps developers manage the state of their applications. React-Redux provides a way for a React application to communicate with a central store that holds the state of the application. If you are familiar with react-redux, there are several challenges using it as explained by the documentation ranging from

1. Configuring a Redux store is too complicated
2. Installing many Packages
3. Too much boilerplate code

With those challenges, RTK is meant to solve them and provide a way to write efficient ways to set up and store and define reducers,

Installation

For an existing project, run the following code in your terminal

npm install @reduxjs/toolkit react-redux

OR

yarn add @reduxjs/toolkit

For a new project and this tutorial, we will create an App with redux template, run the code below, our App name is redux-tutorial

npx create-react-app redux-tutorial --template redux

After the installation, run


cd redux-tutorial

code .

npm start

Your package.json file should like this, redux-toolkit and react-redux will be installed.

Setting up

In this Tutorial, we will be building a simple Todo list to illustrate our work. We need to basically go through three basic step as listed below

Configure Store
Wrap our App with Provider from react-redux *
Create Slices
Dispatch our action and get state

*Only necessary if you are using an existing App

In our features folder, a subfolder of src, create another folder called todo where all our configurations will be. For those that installed with redux template, all configurations have been done. For existing project, create a folder store and add index.js.

ConfigureStore

The configureStore function is used to create a Redux store that holds the complete state tree of our App. Configure store accepts reducers as the required parameters, others parameters that can be included are

Thunk middleware
Redux DevTools
PreloadedState
Enhancers

Lets create our storeby importing the following

src/app/store.js OR ./store


import { configureStore } from '@reduxjs/toolkit';
import todoReducer from  "features/todo/todoSlice.js"
export const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

Here, we import our todoReducer (which will be created soon). the import was done using absolute path. Read more about absolute path in my article here. We can have multiple reducers combined together. later on, we will use todos as the key to access our state.

Wrap our App with Provider from react-redux


import React from "react";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./app/store";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

CreateSlice

This helps us to write reducers without the need to spread our state. Redux Toolkit allows us to write "mutating" logic in reducers. It doesn't actually mutate the state because it uses the Immer library, It also automatically generates action creator functions for each reducer. It literarily saves us with writing our actions type logic repetitively.

In features folder, create another folder todo and add todoSlice.js where we write our todoSlice

todoSlice.js


import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  todoList: [],
};

export const todoSlice = createSlice({
  name: "todos",
  initialState,

  reducers: {},
});
const { actions, reducer } = todoSlice;

export const {} = actions;

export default reducer;

This is a boilerplate for writing our slices, in our createSlice function, we passed in our name, the initial State and our reducers.

Actions

let's write our first action, addTodo add a new todo to the list and we create it in reducers object as below

Add Todo


addTodo: (state, action) => {

state.todoList.push(action.payload);

}

Here we are using the push method to add new todo to our list. action.payload is the todo that will be added to todoList.

Delete Todo

To be able to delete from the list, we use the index to select a particular todo and use the array method of splice. here is the code:

 deleteTodo: (state, action) => {
      state.todos.splice(state.todos.indexOf(action.payload), 1);

},

Update Todo


 updateTodo: (state, action) => {
      const todo = state.todoList.findIndex(action.payload.id);
      state.todos[todo] = action.payload;
 }

We can export all our actions and our final code like this


import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  todoList: [],
};

export const todoSlice = createSlice({
  name: "todos",
  initialState,

  reducers: {
    addTodo: (state, action) => {
      state.todoList.push(action.payload);
    },
    deleteTodo: (state, action) => {

   state.todoList.splice(state.todoList.indexOf(action.payload), 1);
    },
    updateTodo: (state, action) => {
      const todo = state.todoList.findIndex(action.payload.id);
      state.todoList[todo] = action.payload;
    },
  },
});

const { actions, reducer } = todoSlice;

export const { addTodo } = actions;

export default reducer;

With this we concluded writing on redux logic, last thing we need to do is to import it in our App.

useDispatch and useSelector

The two hooks work to get set and get data from our store. if we need to modify the state, useDispatch will be used to dispatch an action while if we need to access our state, useSelector will be used.

Todo App

For this, we created our Todo component in the root of our src folder, our folder structure should look like this

We create a simple UI and you can have access to the code in the linked repository.. Here is the code in our Todo.js file


import { useState } from "react";
import {  useSelector } from "react-redux";

const Todo = () => {
  const [todo, setTodo] = useState("");
  const state = useSelector((state) => state.todos.todoList);

  return (
      <div className="todo">
      <h3>Simple Todo App</h3>
   <div className="input__container">

      <input
        type="text"
        value={todo}
        onChange={(e) => setTodo(e.target.value)}
      />

      <button>Add Todo</button>
    </div>
     <ol>
        {state.length > 0 &&
          state.map((todo, index) => {
            return (
              <li key={index}>
                <h6>{todo} </h6>

                <button name="edit">Edit</button>

                <button name="delete">
                  Delete
                </button>
              </li>
            );
          })}
      </ol>
    </div>
  );
};

export default Todo;

The first thing we do here is to get the current state of our todoList using useSelector hook, we have

Get Initial State


const state = useSelector((state) => state.todos.todoList);

todos here refer to the name of the reducer we used when configuring our store. So we have access to our todoList array which contains our initialState and if we log it to console, we have

Add a Todo

To add to the list, we need to dispatch our addTodo action as shown below. we will use useDispatch hook.

first we call the useDispatch and assigned it to dispatch variable.

  const dispatch = useDispatch();

We dispatch our action when we clicked the button, with our todo as a paramater as shown below. we checked if there's todo before we dispatch our action and clear our input field afterwards


     <button onClick={() => {
                 if (!input) return;
                 dispatch(addTodo(input));
                 setInput("");
                 }}
     >
     Add Todo
     </button>

on the click of Add Todo button, we have something similar to this

Delete a todo

Similar to what we did for addTodo, we will pass the index a todo and dispatch our deleteTodo action


import { addTodo, deleteTodo } from "features/todo/todoSlice";

In our edit button, we add the code to set our todo to the input value, here is how our button code looks like

 <button name="delete" onClick={()=>dispatch(deleteTodo(index))}>
 Delete
 </button>

Update a todo

Here , we need to select a particular todo item and make update to it, full details to the implementation is available in the repo.

Thank you for reading. Please leave a comment if you have any question or clarification and I hope you've learned something new from this post. Want to stay up to date with regular content regarding JavaScript, React and React-Native? Follow me ❤️ on LinkedIn.

Configuring Absolute path in React Projects

ISIAKA ABDULAHI AKINKUNMI — Sat, 24 Dec 2022 10:38:01 +0000

Recently, I worked on a legacy codebase and looking into it I found out the imports were done using relative path, It was difficult to comprehend and also show errors when trying to copy the code from one file to another folder, thereby spending more time to resolve the import errors. In this article, I will explain how to use absolute path in your CRA, Vite and React-Native projects

Table Of Contents

What is jsconfig.json ?
Configuring Absolute path in:
- Create React App
- Vite
- React-Native

What is jsconfig.json?

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. In jsconfig.json, files belonging to the project and the files to be excluded from the project can be listed.

How to Configure Absolute Path in Create-React-App

In the root of our folder, where we have package.json file, create a file called jsconfig.json. Add the following code

{
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"],
    "exclude":["node_modules,"build"]
}

👉🏼 By default the JavaScript language service will analyze and provide IntelliSense for all files in your JavaScript project. Its a good practise to exclude node_modulues , build , dist etc to speed up IntelliSense. If you do not have a jsconfig.json in your workspace, VS Code will by default exclude the node_modules folder for you.

👉🏼 After adding the file, You will need to restart your server for this to be effective and we can reference the folders inside our src without error as shown below

Relative Path Configuration in Vite

👉🏼 Here, we need to install a dependency vite-jsconfig-paths which gives vite the ability to resolve imports using jsconfig.json path mapping. open your terminal and run

npm i vite-jsconfig-paths -D

👉🏼 After installation, we inject it into our vite app by adding it to our vite.config.js file as shown below

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import jsconfigPaths from "vite-jsconfig-paths";


export default defineConfig({
  plugins: [react(), jsconfigPaths()],
});

👉🏼 After that, we create jsconfig.json file as shown in the react demonstration.

Relative Path configuration In React-Native

👉🏼 For this, we use babel-plugin-root-import library. lets install the package as below:

npm i babel-plugin-root-import -D

👉🏼 After installation, add the dependency to your babel.config.js file.

👉🏼 Custom rootPathPrefix: By default, the import will be relative to the working directory of the process running babel. we can customized by using ~, @ or any other symbol. I will be using the @ and our babel.config.js looks like this


module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "babel-plugin-root-import",
        {
          rootPathPrefix: "@",
          rootPathSuffix: "src",
        },
      ],
    ],
  };
};

👉🏼 If you don't like the @ syntax you can use your own symbol (for example an # symbol or \ or anything you want).

👉🏼 It is now possible to import your files using "@/" as a prefix. Here's an example below:

Before

After

Important Notice: After making the necessary changes in `babel.config.js`, Don't forget to restart your server.

Thank you for reading. I hope you've learned something new from this post. Want to stay up to date with regular content regarding JavaScript, React? Follow me ❤️ on LinkedIn.

Beginner Guide on Unit Testing in React using React Testing Library and Vitest

ISIAKA ABDULAHI AKINKUNMI — Sun, 18 Dec 2022 20:52:23 +0000

As Application grows bigger and more complex, manual testing becomes time-consuming, difficult to achieve its purpose and prone to error as it might be difficult to notice the wee change that can break the functionalities. In this article, I'd like to explain the concept of unit testing, I expect you have a basic understanding of React concepts like components and state.

lets get started💧

Table Of Content

What is Unit Testing ?
Purpose Of Unit Testing
What is React Testing Library ?
Setting React App With Vite
Vitest
- Why use Vitest?
- Stages of Testing
- Write Your First Unit Test

What is Unit Testing?

Unit tests are tests focused on individual component, function modules called unit. It isolates the particular unit and test it separately to ensure it works as expected. For React components, it could mean checking if the component renders correctly for a specified prop.

The more your tests resemble the way your software is used, the more confidence they can give you.

Purpose Of Unit Testing

Improved code quality and reliability: Unit testing ensures that individual components and functions in a React application are working as intended, reducing the chances of bugs and errors.
Easier debugging and maintenance: With unit tests in place, it is easier to identify and fix any code issues and make modifications and updates without breaking the application.
Better collaboration and communication among team members: Unit tests provide clear documentation of each component's expected behavior and functionality, enabling team members to understand and work on the code more effectively.
Enhanced user experience: By thoroughly testing each component and function, unit tests ensure that the user experience is consistent and seamless, resulting in a better overall product.
Faster development and deployment: With the ability to quickly identify and fix issues, unit testing allows for faster development and deployment of React applications.

What is React Testing Library?

React Testing Library RTL is a lightweight solution for testing web pages by querying and interacting with DOM nodes.
RTL is a popular testing library for React applications that helps developers write reliable tests for their components. It is designed to encourage writing tests that are easy to read and understand, which makes it a great tool for teams working on large React projects.

One of the key features of react-testing-library is its focus on testing the behavior of a component rather than its implementation. This means that tests written with react-testing-library are less likely to break when the implementation of a component changes, which can save developers a lot of time and effort.
The library provides a set of utility functions for interacting with React components in a way that simulates how a user would interact with them.

Setting React App With Vite

To set up our application, we will be using vite as an alternative to create-react-app, Vite is a lightweight and minimalistic tool, providing only the essential features and tools needed for React development.

To create a vite project, run the following command in your terminal

npm create vite@latest

OR

yarn create vite

Then follow the prompts to input project name, framework and variant:

For project name, we can use react-testing-project
For framework, select React option
For variant select javascript from the available options

After All these, run the following


cd react-testing-project
npm install

OR

cd react-testing-project
yarn install

After these steps, open it in your favorite IDE or run
code . to open in default IDE and start the server with the code below

npm run dev

OR

yarn run dev

Open the URL in your browser and it should display something similar here

Vitest

Vitest is a blazing-fast unit test framework powered by vite. It aims to position itself as the rest runner of choice for vite projects, and as a solid alternative even for projects not using vite.

Why use Vitest?

Shared configuration with vite.
Vitest supports HMR (Hot Module Reloading), which speeds up your workflow. With HMR, only the changes are updated on the server, and the server reflects the new changes.
Vitest is relatively simple to use and doesn't require complex configuration. This makes it easier to get started with testing your components.
Jest Snapshot support.

Stages of Testing

Setup: Before you can test an element, you will need to set up your testing environment. This typically involves installing the testing library and any dependencies, creating a test file, and importing the necessary components and utilities from the library.
Rendering: To test an element, you will need to render it in a testing environment. You can use the render function from the testing library to do this, which will return an object containing the rendered element and various utility functions for interacting with it.
Querying: Once you have rendered the element, you can use the query functions provided by the testing library (such as getByText or getByLabelText) to locate specific elements within the rendered tree.
Interacting: After you have located the element you want to test, you can use the utility functions provided by the testing library (such as fireEvent or userEvent) to simulate user interactions with the element.
Assertion: Finally, you can use the assertion functions provided by the testing library (such as expect or assert) to verify that the element is behaving as expected in response to the simulated interactions.
- Setup

Install vitest and jsdom as dev dependencies using:


npm i -D vitest jsdom

OR

yarn add -D vitest jsdom

Also the following also

npm i @testing-library/jest-dom @testing-library/react

OR

yarn add @testing-library/jest-dom @testing-library/react

After all installations are successful, we need to add a test script in our package.json file like this:

test: "vitest"

So, our package.json file, look like this

In src folder, create a setupTests.js and add the following code

import "@testing-library/jest-dom/extend-expect

Also in our vite.config.js add a test object to the config like below


 test: {
    globals: true,
    environment: "jsdom",
    setupFiles: "src/setupTests.js",
  },

so, our vite.config.js looks like this:

We are done with installation and configuration, last thing left before running our test is to create __tests__ folder in src folder. we will also create App.test.js in __tests_ folder where we are to write all our codes, our file structure should look like this

Querying

Before writing our test, we should get acquainted with several methods that allow us to locate elements based on their text content, display properties, or other attributes on the page.

To select a single element, you can use the getBy*, findBy*, or queryBy*.
To select multiple elements, you can use the getAllBy*, findAllBy* or queryAllBy*.
queryBy*: These element selectors allow you to search for an element in your component, but don't expect the element to be present. They will return the element if it is found or return null if the element is not found. These element selectors are useful when you want to check for the presence of an element, but don't want the query to throw an error if the element is not found.
getBy*: These element selectors allow you to synchronously search for an element in your component. They will return the element if it is found or throw an error if the element is not found. These element selectors are useful when you expect the element to be present in the DOM at the time the query is executed.
findBy*: These element selectors allow you to asynchronously search for an element in your component. They will return a promise that resolves to the element when it becomes available or rejects it with an error if the element is not found. These element selectors are useful when you need to wait for an element to appear in the DOM before interacting with it.
queryAllBy*: These element selectors allow you to search for multiple elements in your component, but don't expect the elements to be present. They will return an array of elements if any elements are found, or return an empty array if no elements are found. These element selectors are useful when you want to check for the presence of multiple elements, but don't want the query to throw an error if no elements are found.
getAllBy*: These element selectors allow you to synchronously search for multiple elements in your component. They will return an array of elements if any elements are found, or throw an error if no elements are found. These element selectors are useful when you expect multiple elements to be present in the DOM at the time the query is executed.
findAllBy*: These element selectors allow you to asynchronously search for multiple elements in your component. They will return a promise that resolves to an array of elements when the elements become available, or rejects with an error if no elements are found. These element selectors are useful when you need to wait for multiple elements to appear in the DOM before interacting with them.

Write Your First Unit Test

In Our App.jsx file, we have some code there that we can write a basic test to debug our screen and check if some elements are present ,

Rendering

lets debug our screen, copy and paste the code below

import App from "../App";
import { it, describe } from "vitest";
import { render, screen } from "@testing-library/react";


describe("App.js", () => {
  it("Check if the App render very well", () => {
    //render our App properly
    render(<App />);
    screen.debug();
  });
});

Here, we import our <App/> which is to be tested, Also screen and render are imported to be able to interact with the component. describe method is used to organize and structure tests, and it typically takes a string parameter that describes the group of tests being defined and a callback function that contains the actual tests. In this example, the string argument, "Check if the App render very well", provides a label for the group of tests, and the callback function contains the actual tests that are being run. The render method is used to render a given React component and return an object that provides several utility functions for interacting with the rendered component. screen.debug method is a utility function that allows you to print the current state of the rendered component to the console. This can be useful when writing or debugging tests.

lets run the test by entering the following code

npm run test

OR

yarn run test

After running the test, it renders our <App/> in the terminal as shown below

Assertion lets check if button and heading elements are in our component will the following code:

import App from "../App";
import { it, describe } from "vitest";
import { render, screen } from "@testing-library/react";

describe("App.js", () => {
  it("Check if the button is in the document", () => {
    render(<App />);
    const button = screen.getByRole("button");
    expect(button).toBeInTheDocument();
  });

  it("check if h1 element is in the document", () => {
    render(<App />);
    const h1 = screen.getByRole("heading", { level: 1 });
    expect(h1).toBeInTheDocument();
  });
});

Here, we are having two tests that render our <App/> , in App.jsx , I added an attribute of role with the value of button to easily find the element, getByRole method accepts a second parameter which we used to indicate the heading is h1. expect is used to define the expected behaviour of a test and to verify that the actual behaviour matches the expected behaviour. in our two tests, we expect both elements to be in the document. below is what happens when we run our test

Interaction In this test, we will test when a user interact with element such as click event and check the state change as shown below


import App from "../App";
import { it, describe,  } from "vitest";
import { render, screen } from "@testing-library/react";

describe("App.js", () => {
  it("Check if the button is in the document", () => {
    render(<App />);
    const button = screen.getByRole("button");
    expect(button).toBeInTheDocument();
  });

  it("check if h1 element is in the document", () => {
    render(<App />);
    const h1 = screen.getByRole("heading", { level: 1 });
    expect(h1).toBeInTheDocument();
  });
  it("Check if the current value renders when click", () => {
    render(<App />);
    const h1 = screen.getByRole("heading", { level: 1 });
    expect(h1.textContent).toBe("0");
  });
});

since we render App.jsx in the three test, we can refactor our code and keep it DRY by using another method beforeEach, which runs before each test, so our updated test code becomes

import App from "../App";
import { it, describe, beforeEach } from "vitest";
import { render, screen } from "@testing-library/react";

beforeEach(() => {
  render(<App />);
});

describe("App.js", () => {
  it("Check if the button is in the document", () => {
    const button = screen.getByRole("button");
    expect(button).toBeInTheDocument();
  });

  it("check if h1 element is in the document", () => {
    const h1 = screen.getByRole("heading", { level: 1 });
    expect(h1).toBeInTheDocument();
  });
  it("Check if the current value renders when click", () => {
    const h1 = screen.getByRole("heading", { level: 1 });
    expect(h1.textContent).toBe("0");
  });
});

With this, Our code becomes neater and more readable, our test is expected to run successfully.

I made a change to App.jsx file, by putting our state in the h1 element. as shown below

To simulate the click event, I added the following code

it("Check if the  value increases when button is clicked", async () => {
    const button = screen.getByRole("button");
    await userEvent.click(button);
    const h1 = screen.queryByRole("heading", { level: 1 });
    expect(h1.textContent).toBe("4");
  });

we use async and await when testing asynchronous events such as click, because it ensures that the test will wait for the click event to complete before moving on to the next step. running this test will definitely fail because the expected value when clicked is 1 instead of 4

So if we change the value from 4 to 1, the test runs as expected as shown below

Thank you for reading. I hope you've learned something new from this post. The code can be found in this repository Want to stay up to date with regular content regarding JavaScript, React? Follow me on LinkedIn.

InnerHTML vs InnerText

ISIAKA ABDULAHI AKINKUNMI — Fri, 16 Dec 2022 11:51:49 +0000

When trying to set the property of elements in Javascript, there are several similar ways of doing it, in this article I will explain what innerHTML and innerText are all about and their differences. Let's get started!!!

What's InnerHTML ?
innerHTML is the property of an element that set or get the HTML markup contained within an element. It contains HTML tags like <li> ,, spacing and formatting. Let's create a p element with some content as shown below

HTML

 This is an example of innerHTMl text 

Javascript

let element = document.getElementById("p").innerHTML;

if we log the value to console we have

"This is an example of innerHTMl text"

Everything in between the p element is shown without formatting and spacing.

Setting the value of an element's innerHTML removes all of its descendants and replaces them with elements constructed by parsing the HTML given in the string.

element = "This has been changed"

Note: Whenever you add, append, delete or modify contents on a webpage using innerHTML, all contents are replaced, also all the DOM nodes inside that element are reparsed and recreated, thereby making the process slow.

The use of innerHTML also creates a potential security risk for your website. Malicious users can use cross-site scripting (XSS) to add malicious client-side scripts that steal private user information stored in session cookies.

innerText

The innerText property returns the rendered text content of an element that is visible in the browser. It doesn't return the content of <script> and <style> elements, It also neglects the spacing unlike innerHTML. innerText cannot access elements If elements are hidden by CSS properties like visibility and display.

HTML

 This is an example of innerText text 

Javascript

let element = document.getElementById("p").innerText;

in the console, we have This is an example of innerText text in the log.

When you set the innerText property, all child nodes are removed and replaced by only one new text node. innerText is what you get when a user copies and pastes the content of an element. innerText is best used when you need to retrieve the content of an element in plain text.

Thanks for Reading.

How To Create Custom Input Components With Formik, yup and Material-UI

ISIAKA ABDULAHI AKINKUNMI — Wed, 07 Dec 2022 12:07:03 +0000

Components are building blocks for our UIs and with React, reusable, clean and efficient codes are easy. In this tutorial, we will learn how to create custom input field components with React, material-ui and yup. We will use material-ui components in the Formik Field and implement validations using yup.

Introduction

Forms are great features that are common in many web applications, creating a custom component with a popular Javascript library like React and formik is a straightforward process with decent functionalities and error handling.

Create Project

Lets create a new project using vite command-line tool:

 npm create vite@latest

This will prompt us to select the project Name( for this tutorial we used Formik-Input-component), Package name (formik-input-component), framework( React) and variant (JavaScript).
After all, we run the following code:

  cd Formik-Input-component
  npm install
  npm run dev

Attached is the screenshot of the process:

Installation

Next, we will install formik, yup, and material ui packages using npm or yarn:

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

OR

yarn install @mui/material @emotion/react @emotion/styled formik yup

Implementation

Once the packages are installed successfully, we can create a folder called formikControl where all our files will be saved. In the formikControl folder, we will create the following files

FormikControl.jsx
Input.jsx
SelectInput.jsx
index.js,
TextError.jsx

Component

Let's start with with our Input.jsx file, we will do the following imports into our file


 import { Field, useField } from "formik";
 import PropTypes from "prop-types";
 import { FormLabel, Grid, TextField } from "@mui/material";

After the imports, we create a functional component and the following code:


 const Input = (props) => {
 const { name, label, ...rest } = props;
 const [field] = useField(name);

  return (
    <Grid container direction="column">
      <FormLabel component="legend">{label}</FormLabel>
      <Field {...field} {...rest} as={TextField} />
    </Grid>
  );
};

Input.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string,
};

export default Input

The <Field/> automatically hooks up our TextField to Formik courtesy of the as attribute. We can render our React component and formik will automatically inject onChange, onBlur, name, and value props of the input field attributed to the name prop of the component. We destructed the field object from usefield to perform this.

To be able to handle errors from the validations, we use our already created <TextError/> and render it beneath our . To get the error messages, we destructure ErrorMessage from formik and pass in <TextError/> just like we did for TextField in . Below is the new code that we have:


import { ErrorMessage, Field, useField } from "formik";
import PropTypes from "prop-types";
import { FormLabel, Grid, TextField } from "@mui/material";
import TextError from "./TextError";
const Input = (props) => {
  const { name, label, ...rest } = props;
  const [field] = useField(name);

  return (
    <Grid container direction="column">
      <FormLabel component="legend">{label}</FormLabel>
      <Field {...field} {...rest} as={TextField} />
      <ErrorMessage name={name} as={TextError} />
    </Grid>
  );
};

Input.propTypes = {
  label: PropTypes.string,
  name: PropTypes.string.isRequired,
};

export default Input;

The next thing we do is to define our .

TextError.jsx


import PropTypes from "prop-types";

const TextError = ({ children }) => {
  return <div style={{color:"red"}}>{children}</div>;
};

TextError.propTypes = {
  children: PropTypes.node,
};

export default TextError

The <TextError/> render any error that returns from the ErrorMessage and display it,

Note: we gave it a color red to show it's an error.

Rendering Our Input Field

To display our input fields to the user, we try to make them seamless and easier to use. To do this, we import our Input component into our . Here is the complete code


import Input from "./Input";
import PropTypes from "prop-types";
const FormikControl = ({ control, ...rest }) => {
  switch (control) {
    case "input":
      return <Input {...rest} />;
    // other cases...
     default:
    return null;
  }
};
FormikControl.propTypes = {
  control: PropTypes.string.isRequired,
};
export default FormikControl;

The control prop helps to switch between different types of input field created and the rest prop is used to pass other details passed to the input field component.

yaaah..... our component is ready for use......

To use the Component, we import it into a and render it just like it shown below in <App/>

App.jsx


import {  Grid,Button } from "@mui/material";
import {  Formik,Form } from "formik";
import FormikControl from "./FormikControl";
const App = () => {
  return (
    <Formik
      initialValues={{
        FullName: "",
      }}
      onSubmit={(values)=>console.log(values) }
    >
        <Form style={{ width: "100%" }}>
            <Grid container direction="column">
              <FormikControl
                control="input"
                label="Name"
                id="name"
                name="FullName"
                placeholder="Enter your name"
              />
           <Button type="submit">Submit</Button>
            </Grid>
          </Form>
        );

    </Formik>
  );
};
export default App;

Here, We imported our <FormikControl/> and rendered it inside Formik, we passed our initialValues, and onSubmit Props. We must ensure that the name attribute in our <FormikControl/> matches the one in our intialValues. With that Formik automatically assigned values and other field props.

Yup implementation

After creating our input components, we would like to add some validations to them, yup is a JavaScript schema builder for value parsing and validation. we already installed the package and use it we import it into our and define the validation rules as shown below:

import * as Yup from "yup"

Next, we define our validation schema object as below


 const validationSchema = Yup.object({
    FullName: Yup.string("Enter your Name").required("Name is required"),
  });

Here, we also use the name attribute that was used in i.e FullName as the key for the validation to work effectively.
Finally, we passed our validationSchema as a prop to the Formik component. Here is the final code in <App/>.

App.jsx


import { Form, Formik } from "formik";
import { Grid, Button } from "@mui/material";
import * as Yup from "yup";
import FormikControl from "./FormikControl";
const App = () => {
  const validationSchema = Yup.object({
    FullName: Yup.string("Enter your Name").required("name is required"),
  });

  return (
    <Formik
      initialValues={{
        FullName: "",
      }}
      validationSchema={validationSchema}
      onSubmit={(values) => console.log(values)}
    >
      <Form style={{ marginTop: "1rem", width: "100%" }}>
        <Grid container direction="column">
          <FormikControl
            control="input"
            label="Name"
            id="name"
            name="FullName"
            placeholder="Enter your FullName"
          />
        </Grid>
        <Button type="submit">Submit</Button>
      </Form>
    </Formik>
  );
};
export default App;

That ends our lesson on implementing a <FormikControl /> with yup, formik and material-ui. The code is available in this repo and I have also implemented input fields like textarea, radio, date, time, select and checkbox.

Thanks for reading

Introduction to JavaScript Bitwise Operators

ISIAKA ABDULAHI AKINKUNMI — Sun, 15 Aug 2021 20:37:12 +0000

Introduction

Recently on twitter, a tweep asked how to determine if a number is even or odd. I hurriedly answered using modulus. Yeah, my answer was right, but any other approach? I was hinted about bitwise operator. JavaScript operates using different type of operator which includes

Assignment operators
Arithmetic operators
Ternary operators
Logical operators
Comparison operators
Typeof operator
Bitwise operators

We commonly use most of these operators in our routine but sparingly use bitwise operator especially if you just getting started with JavaScript.
This article will elucidate on different bitwise operators, how we can use it and

What's bitwise?

Bitwise is a level of operations that involves working with individual bits, which are the smallest units of data in a computer. a bit can be 0 or 1. All bitwise operations are performed with 32bits binary numbers and later converted to 64bits(javaScript works with 64bits).

In this article, we will make use of ES6 arrow function syntax and conversion to decimal(base 10) will follow the example below:

Conversion of integers to bit will be done using the binary operation as illustrated below, Writing of the bits begins from the lasts bit to the first as pointed by the arrow:

From the above snippets, we can conclude that numbers that has the last bit as 0 are even while integer with last bit as 1 are odd

Converting 12 to bit , we have

000000000000000000000000000001100

But for simplicity sake, we remove the preceding 0s and our bits are

Types of Bitwise Operators

& — AND
| — OR
~ — NOT
^ — XOR
<< — Left Shift
>> — Sign-Propagating Right Shift
>>> — Zero-Fill Right Shift

Lets get started

& - AND OPERATOR : This return 1 if the corresponding bits of operands are 1 and return 0 if they differs.

Below is a table for comparison

Example 1: The example below is a `function` that computes the `AND` operator.

Common interview question is to determine if a number is even or odd, JavaScript Bitwise AND can be used.

Example 2 : Determine if a number is even or odd

Explanation
As I said earlier, Even Numbers when converted to bits ends with 0, JavaScript compares the last bit and discard the remaining. Therefore, 0 & 1 will return 0.

Example 3: The below code checks for `odd` Number

Explanation
This check if the last bit is 1, then compare 1 & 1 and return true otherwise return false

| - OR OPERATOR : This return 1 if any of the corresponding operand's bit is 1and return 0 is the operand's bits are 0.

Below is a table illustrating different bits combination

Example 4 : The below code takes two `operands` as arguments and perform the `OR` bitwise operation.

~ NOT Operator : This accepts only one operand(unary operator). ~ performs NOT operator on every bit. bits that are 1 become 0 and bits that are 0 turn to 1, forming the ones' complement of the given binary value.

Example 5 : The `function` below performs `NOT` operation

Explanation

As we said earlier, ~ operator turns the bit from zero to one and vice-versa.
~ 8 becomes 1111111111111111111111111111011 (-9 in decimal)

Few things to note:

The first bit by the left is called the sign bit. The sign bit is 0 for positive integer and 1 for negative integer.
The remaining 31bits are used to represent integer.
the maximum 32bits integer that can be represented can be calculated as 2^31 - 2^0 = 2147483647
While the minimum is -(2^31) = - 2147483648

Bitwise operators convert their operands to 32-bit signed integers in two’s complement format. when the NOT operator is used on an integer, the resulting value is the two’s complement of the integer as shown below

^ - XOR OPERATOR : Also called (exclusive-Or), it returns 0 if the operand's bit are the same (0 or 1) and if different return 1

Example 6 : The `function` below performs `XOR` operation

<< - Left shift OPERATOR : This takes two operands, the first is an integer to be converted to bits while the second operand is the number of bits of the first operand to be shifted away from the left and added to the right. ##### Example 7 : The function below performs Left shift operation

>> - Sign-propagating right shift OPERATOR: This takes two operands, the first is an integer to be converted to bits while the second operand is the number of bits of the first operand to be shifted away from the right and also discarded from the left.

Example 8 : The `function` below performs `Sign-propagating right shift` operation.

>>> - Zero-fill right shift : This behaves like the sign-propagating right shift (>>) operator. The difference is that bits are shifted in from the left.

Example 9 : The `function` below performs `Zero-fill right shift` operation.

Thanks for Reading!!!!
If you enjoy this and wish to get Notified when I published new articles, click here to subscribe.

My Target as HNGi8/Zuri Intern 2021

ISIAKA ABDULAHI AKINKUNMI — Sun, 15 Aug 2021 18:01:56 +0000

My Name is Isiaka Abdulahi, a Front end developer proficient in HTML, CSS, JavaScript, ReactJS and Bootstrap. I'm currently Interning at HNGi8/ZURI. I joined the fellowship series that ended and the experiences were awesome, learning to meet deadlines, working on projects individually and also as a team, exhilarating feedbacks after tasks, team collaboration and grit were all that featured in the last fellowship. If all could be rosy for the fellowship, what would you think the internship would be?

My joy knew no bound when I learnt that application for the next internship was out, I applied and was anxious about the admission. Having read and heard of those who had been successful in the previous cohort, I believe it's my time to take on a larger stage.

Below are the lists I hope to achieve during the 8 weeks of intensive training.

A tech role: Before or at the end of this internship, I want to secure my first role as a developer, this time, I want to pass technical interviews in flying colors with supports from team mates and mentors
Real-life Projects: one of the challenges #newbies faced is working on impactful projects that can make their portfolios stand out, with this internship, I hope to work on real life projects just like it was done during the fellowship.
Leadership and Team collaboration: oftentimes, I've always being a team player, rallying supports to my team. This time I want to take a step forward, take the bull by the horn and go for the leadership role. This will further improve my interpersonal skills and huge step towards landing my first role.
Networking: As popularly said, Network is net worth, I want to improve my network by meeting people from all walks of life, collaborating with them on projects and having a relationship that goes beyond the internship.

The list is endless. If the above mentioned are achieved.. The internship will be a greater success.

Course Recommendations for Beginners

There are tons of videos on YouTube, it's always a pain in the neck to choose one, but I will always advise watching videos are made less than a year, this will help to keep in touch with the latest development in that particular field. Below are the recommended videos

UI/UX :
Introduction to Figma by Zuri Team
Version control :
Introduction to GIT/GITHUB by Amigoscode
HTML/CSS :
Practical Introduction to HTML & CSS by Zuri Team
JavaScript :
JavaScript programming-full Course by Freecodecamp
JavaScript library (REACTJS)
Link by Codevolution

All Thanks and appreciation go to the Zuri Team. God Bless!!!!!!!!!

Thanks for reading
I write articles on frontend development and technologies.
Do you wish to get notified when I published a new article? click here to subscribe to my posts.

Implementation of Linked List in JavaScript and solution to Leetcode interview Question

ISIAKA ABDULAHI AKINKUNMI — Tue, 10 Aug 2021 13:41:01 +0000

Introduction

In computer science, a data structure is a data organization, management and storage format that enables efficient access and modification. Data structures provide a means to manage large amounts of data efficiently for uses such as large databases and internet indexing.

There are various types of data structures which includes array, linked list, record, union, binary tree and graph.
In this article, we will look at linked list, it's implementation, various methods we can perform on the linked list and some interview questions.

What is linked list?

A linked list also called list is a linear collection of elements called nodes. The nodes can be any data type(primitive or non-primitive). Each node has a value, and points to the next node in the linked list. i.e a node is aware of next node.

Linked list is the second most-used data structure after array and it is similar to array. The entry point of a linked list is called head while the last node points to null. If a linked list is empty, the head put to null.

Types of Linked list

There are three basic types of linked list namely:

Singly-linked list : This is the simplest type, each node has a data and a pointer to the next node. It allow traversal of data in one direction.
Doubly-linked list: This is a complex type in which each node has a data and two pointers which point to the previous node and next node. traversal of data is bi-directional.
Circular-linked list: This is a similar to singly linked list with the last node points to the first node and vice versa. While traversing a circular liked list, we can start at any node and traverse the list in any direction forward and backward until we reach the same node we started. Thus, a circular linked list has no beginning and no end.

Why use Linked list?

Just like array, linkedlist is a linear data structure which performs all operations like adding, deleting and inserting data. Below are the benefits of Linked List:

Insertion and Deletion: Adding an element at the beginning of array rearranged the items and shift their indexes which might be tedious while working on a large database. In linked list, we just update the address present in the next pointer of a node
Size : Since nodes in the linked list are aware of the next node such that data can exist at scattered addresses this allows for dynamic size which can change at run time unlike array which stores it's data in a non-scattered blocks of memory which can't be changed at run time.
Memory Allocation: For array, memory allocation is done at compile time i.e at the time when array is declared. While for linked list, memory is allocated when data is added to it thus done at run time.
Memory wastage : Since memory allocation is done at runtime for linked list, there's no memory waste. In array, if a size of 100 is declared and only 80 is utilized to store data. The remaining 20 spaces are wasted.
Implementation: Linear data structures like stack and queues are often easily implemented using a linked list.

Limitations of Linked List

Memory Utilization: Memory is needed to store data and also point to the next node in the list. Linkedlist require more memory compared to array.
Search operation: In linked list, direct access to element like index in array is not possible. It involves traversing through the whole list and which could leads to time wastage
Memory wastage: In double linked list that reverse traversing is possible i.e a node is aware of element before and ahead of it. This requires extra memory and wastage if not utilized.

Time Complexity & Big O Notation for Linked list and array!

Implementation of Linked List

Let's create a class LinkedList list, initialized the head, and tail to null and length to zero in the constructor function.

We will also use class to create nodes in the list. This can be access by using the new keyword.

putting all together

Some Linkedlist method

Prepend() : This method add node to the list at the beginning.

printData() : This method prints all the nodes present in the list. It shows the node, pointer and the next node.

append(): This method add new node as the last node on the linked list.

getLength(): This return the length of the list.

find() : This method finds the node passed as argument. or it return null if its not found.

delete(): This removes the node referenced from the argument.

code snippets available on

code pen

github

LeetCode interview

Question 1

Solution to Question 1

Explanation
Deleting a node in linkedlist involves moving pointer to the next node ahead of the target.

 node.val = node.next.val ;

Basically saying, where we have 5 as the val, replace it with next val which is 1. this remove 5 from the node.

node.next = node.next.next;

here, our node is an array, [4,5,1,9]. our node.next.next will be [1,9]. This delete the node and its value.

Summary

In this article, we discussed linkedlist, different types of linkedlist, the benefits and limitations over array, several methods that can be used and solution to leetcode problem.

Thanks for reading
Do you wish to get notified when I published a new article? click here

ISIAKA ABDULAHI

Third Argument in JavaScript SetTimeOut Method and Practical Example in Your Next Project

ISIAKA ABDULAHI AKINKUNMI — Wed, 04 Aug 2021 14:28:47 +0000

What is setTimeOut?
SetTimeOut is a global or window method which executes a function taken as an argument once the timer expires.

syntax

Parameters
function can be defined within the method or passed by value to the method.
timer is the delay expected before the function is executed. It's usually in milliseconds. This parameter is optional as a value of 0 is set by default which makes the function executes immediately.

More often in our use of the method, we tend to use only two parameters(function and timer). This article will shed more lights on the use of third arguments and so on.

Example
Let's compare the common way of using setTimeOut without the third argument
syntax

Let's see how we can implement the same using third argument

syntax

From the second code, we can see that third and other numbers of arguments is use as argument in the reference function given to the setTimeOut method. In short these arguments are carried forward to the reference function.

Also array can be passed as an argument.

syntax

Also an object could be passed as argument. Try that!!

Application in search box
Would you like to animate or spin your search icon pending a request is fulfilled or for some delay. using setTimeOut with third argument will get it done, let's get started

1. we add our form tag, input box and search icons( fontawesome icons).

syntax

2. We add some css stylings to make the page looks nicer or you can style to suit your taste.

syntax

3. Our search box looks like this adding the css stylings.

syntax

Lets add some functionalities

4. lets create an helper function that returns an element.

syntax

5. Using the above helper function, we can get our search-icon, searchBtn elements below:

image

6. We add an eventListener to searchBtn button such that when click we want it to perform some operations:

syntax

7. Defining the animate function, We want the search icon fa-search to be hidden and spinner fa-spinner to animate for 3s when the searchBtn is clicked. To execute that, we define our animate function below:

syntax

8. In passing searchIcon as the third arguments, the setTimeOut method is aware of the icon to restore after the fa-spinner finished animating after 3s.

Thanks for reading
Do you wish to get notified when I published a new article? click here

ISIAKA ABDULAHI

Method chaining in javascript

ISIAKA ABDULAHI AKINKUNMI — Mon, 19 Apr 2021 15:52:11 +0000

Method is a function that is a property of an object. It is also a property containing a function definition.
let's consider the example below

Var car = {
Color: “red”,
brand: “Toyota”,
description: function (){
This.brand  + "is a  Motor Corporation is a Japanese multinational automotive manufacturer"
}
}

// description is a property of a car that is also a function. So a function inside an object is called METHOD.
 //Calling 
console.log(car.description())
// Toyota is a  Motor Corporation is a Japanese multinational automotive manufacturer

If we have 5 methods in the object. We end up with something like this:
car.description()
car.description()
car.description()
car.description()
car.description()

Could you see that car is unnecessarily repeated and doesn’t seems neat and could take lines of code? We can get rid of that by using a mechanism called METHOD CHAINING.

Method chaining is the mechanism of calling a method on another method of the same object. This ensures a cleaner and readable code. Method chaining uses this keyword in the object's class to access its methods. In javascript, the this keyword refers to the current object in which it is called. When a method returns this, it simply returns an instance of the object in which it is returned. in another word, to chain methods together, we need to make sure that each method we define has a return value so that we can call another method on it.

Let's write some code

Class chaining{
    Method1(){
    console.log(method1)
    return this
    }

    Method2(){
    console.log(method2)
    return this
    }

}

 Const chaining_obj = new chaining()
 chaining_obj
 .mathod1()
 .method2()

//output
method1
method2

let's consider this example

class Arithmetic {
  constructor() {
    this.value = 0;
  }
  sum(...args) {
    this.value = args.reduce((sum, current) => sum + current, 0);
    return this;
  }
  addition(value) {
    this.value = this.value + value;
    return this;
  }
  subtraction(value) {
    this.value = this.value - value;
    return this;
  }
  average(...args) {
    this.value = args.length? (this.sum(...args).value) / 
  args.length: undefined;
    return this;
  }
}


const Arithmetic 1= new Arithmetic()
Arithmetic1
  .sum(1, 3, 6)   // => { value: 10 } 
  .subtraction(3)   // => { value: 7 }
  .add(4)        // => { value: 11 }
  .value         // => 11

Thanks for reading
Do you wish to get notified when I published a new article? click here

ISIAKA ABDULAHI

Portfolio Review

ISIAKA ABDULAHI AKINKUNMI — Wed, 19 Aug 2020 17:39:08 +0000

Pls my great community,
This is my first portfolio, kindly help to view it and give a feedback. It's due for submission as an assignment.

https://isiaka-abdulahi-remlad-portfolio.netlify.app
Thanks.
It's not yet mobile responsive

My first post

ISIAKA ABDULAHI AKINKUNMI — Sat, 25 Jul 2020 05:03:12 +0000

I'm new here

DEV Community: ISIAKA ABDULAHI AKINKUNMI

Getting Started With Redux-ToolKit (RTK)

Table of Content

Introduction

What is React-redux

Installation

Setting up

ConfigureStore

Wrap our App with Provider from react-redux

CreateSlice

todoSlice.js

Actions

Add Todo

Delete Todo

Update Todo

useDispatch and useSelector

Todo App

Get Initial State

Add a Todo

Delete a todo

Update a todo

Configuring Absolute path in React Projects

What is jsconfig.json?

How to Configure Absolute Path in Create-React-App

Relative Path Configuration in Vite

Relative Path configuration In React-Native

Important Notice: After making the necessary changes in babel.config.js, Don't forget to restart your server.

Beginner Guide on Unit Testing in React using React Testing Library and Vitest

Table Of Content

What is Unit Testing?

Purpose Of Unit Testing

What is React Testing Library?

Setting React App With Vite

Vitest

Why use Vitest?

Stages of Testing

Write Your First Unit Test

InnerHTML vs InnerText

How To Create Custom Input Components With Formik, yup and Material-UI

yaaah..... our component is ready for use......

Introduction to JavaScript Bitwise Operators

Introduction

What's bitwise?

Types of Bitwise Operators

Below is a table for comparison

Example 1: The example below is a function that computes the AND operator.

Example 2 : Determine if a number is even or odd

Example 3: The below code checks for odd Number

Example 4 : The below code takes two operands as arguments and perform the OR bitwise operation.

Example 5 : The function below performs NOT operation

Few things to note:

Example 6 : The function below performs XOR operation

Example 8 : The function below performs Sign-propagating right shift operation.

Example 9 : The function below performs Zero-fill right shift operation.

My Target as HNGi8/Zuri Intern 2021

Course Recommendations for Beginners

Implementation of Linked List in JavaScript and solution to Leetcode interview Question

Introduction

What is linked list?

Types of Linked list

Why use Linked list?

Limitations of Linked List

Time Complexity & Big O Notation for Linked list and array!

Implementation of Linked List

putting all together

Some Linkedlist method

LeetCode interview

Solution to Question 1

Summary

Third Argument in JavaScript SetTimeOut Method and Practical Example in Your Next Project

Method chaining in javascript

Portfolio Review

My first post

Important Notice: After making the necessary changes in `babel.config.js`, Don't forget to restart your server.

Example 1: The example below is a `function` that computes the `AND` operator.

Example 3: The below code checks for `odd` Number

Example 4 : The below code takes two `operands` as arguments and perform the `OR` bitwise operation.

Example 5 : The `function` below performs `NOT` operation

Example 6 : The `function` below performs `XOR` operation

Example 8 : The `function` below performs `Sign-propagating right shift` operation.

Example 9 : The `function` below performs `Zero-fill right shift` operation.