DEV Community: stemword

How to Work with the React Context API and React useContext Hook

stemword — Fri, 24 Dec 2021 05:44:14 +0000

React context is primarily used when some data needs to be accessible by many components at different nesting levels. Context provides a way to pass data through the component tree without having to pass props down manually at every level.

IN react we can pass data in top-down via props, but this will be hard to manage in some cases. So, context provides the best way to share value between components without passing props. You can use context to get the currently authenticated users, themes, etc.

To use context we need
1.) Context Provider
2.) Context Consumer. (To get data whenever you need).
So let’s take an example:

const Expenses = () => {
  const [expenses] = useState([
    {
      title: "First expense",
      description: "This is my first expense",
      status: false
    }
  ]);
  return (
    <div>
    <h1>Expenses</h1>
      {expenses.map(note => {
        return (
        <div>
          <h1>{expense.title}</h1>
          <h3>{expense.description}</h3>
          <p>{expense.status? "Paid!" : "Unpaid"}</p>
        </div>
        );
      })}
    </div>
  );
};

Just looking at this code, we can notice that we can break this component into smaller components, making our code cleaner and more maintainable. For example, we could create a component called Expense and inside that component, we would have three more components: Title, Description and Status.

const Expenses = () => {
  const [expenses] = useState([
    {
      title: "First expense",
      description: "This is my first expense",
      status: false
    }
  ]);
  return (
    <div>
      <h1>Expenses</h1>
      {expenses.map(({ title, description, done }) => {
        return <Expense title={title} description={description} status={status} />;
      })}
    </div>
  );
};

const Expense = ({ title, description, status}) => {
  return (
    <div>
      <Title title={title} />
      <Description description={description} />
      <status done={status} />
    </div>
  );
};

const Title = ({ title }) => {
  return <h1>{title}</h1>;
};

const Description = ({ description }) => {
  return <h3>{description}</h3>;
};

const Status= ({ status}) => {
  return <h3>{status}</h3>;
};

We now have a few components, and So we can maintain the reusability and maintainability of our example application. But, in the future, if this application grows in size and we feel the need to break these components into smaller components, we might have a problem.

Passing data through props over and over can cause problems for your application. Sometimes you might pass more props than you need or even forget to pass props that you do need, rename props through the components without notice, etc. If you’re passing data through props from the parent component to a fourth- or fifth-level component, you’re not reusing and writing maintainable code, and this might prejudice your application in the future.

This is what we call “prop-drilling”.That’s one of the main problems that Context API came to solve for us.

createContext

To start with the Context API, the first thing we need to do is create a context using the createContext function from React.

const ExpensesContext = createContext([]);

The createContext the function accepts an initial value, but this initial value is not required.

After creating your context, that context now has two React components that are going to be used: Provider and Consumer.

Provider

The Provider the component is going to be used to wrap the components that are going to have access to our context.
Let’s take an example. Make store/auth-context.js file.

import React from 'react';
const AuthContext = React.createContext({
  isLoggedIn: false
});
export default AuthContext;

Now provide context to the component. so in App.js

import React, { useState, useEffect } from 'react';
import Login from './components/Login/Login';
import Home from './components/Home/Home';
import MainHeader from './components/MainHeader/MainHeader';
import AuthContext from './store/auth-context';
function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
      }}
    >
      <MainHeader onLogout={logoutHandler} />
      <main>
        {!isLoggedIn && <Login onLogin={loginHandler} />}
        {isLoggedIn && <Home onLogout={logoutHandler} />}
      </main>
    </AuthContext.Provider>
  );
}
export default App;

Now you can consume it using consumer.

import React from 'react';
import AuthContext from '../../store/auth-context';
const Navigation = (props) => {
  return (
    <AuthContext.Consumer>
      {(ctx) => {
        return (
          <nav className={classes.nav}>
            <ul>
              {ctx.isLoggedIn && (
                <li>
                  <a href="/">Users</a>
                </li>
              )}
              {ctx.isLoggedIn && (
                <li>
                  <a href="/">Admin</a>
                </li>
              )}
              {ctx.isLoggedIn && (
                <li>
                  <button onClick={props.onLogout}>Logout</button>
                </li>
              )}
            </ul>
          </nav>
        );
      }}
    </AuthContext.Consumer>
  );
};
export default Navigation;

What is the useContext hook?

Looking at the example above, the syntax for consuming context may look a bit strange to you.

Another way of consuming context became available in React 16.8 with the arrival of React hooks. We can now consume context with the useContext hook.

Instead of using render props, we can pass the entire context object to React.useContext() to consume context at the top of our component.

Here is the example above using the useContext hook:

import React, { useContext } from 'react';
const Navigation = (props) => {
  const ctx = useContext(AuthContext);
return (
    <nav className={classes.nav}>
      <ul>
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Users</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <a href="/">Admin</a>
          </li>
        )}
        {ctx.isLoggedIn && (
          <li>
            <button onClick={props.onLogout}>Logout</button>
          </li>
        )}
      </ul>
    </nav>
  );
};
export default Navigation;

Conclusion

So, basically, context is sharing data “globally” for react component and using it when you need it.

I hope this gave you a better understanding of how to use React context. For more such articles, videos, and traveling vlogs you can subscribe to my YouTube channel.
https://www.youtube.com/c/CodeWithTravel

How to implement React Table Project Setup and useTable

stemword — Tue, 14 Dec 2021 04:32:35 +0000

In this article We will learn how to implement react table in our project and understand each and every thing.
So let's install react in our system.

npx create-react-app rtdemo
cd rtdemo
npm start

We will use this module for displaying the table. React Table is a collection of hooks for building powerful tables and Datagrid experiences. These hooks are lightweight, composable, and ultra-extensible, but do not render any markup or styles for you. This effectively means that React Table is a "headless" UI library.

React Table is a headless utility, which means out of the box, it doesn't render or supply any actual UI elements. You are in charge of utilizing the state and callbacks of the hooks provided by this library to render your own table 0markup.

Now install react table module. React Table is compatible with React v16.8+ and works with ReactDOM and React Native.

npm install react-table --save

Edit APP.js file and add following code.

import React, { useState, useEffect, useMemo } from "react";
import { useTable } from "react-table";
const App = (props) => {
const [tutorials, setTutorials] = useState([]);
const retrieveTutorials = () => {
const { tutorials, totalPages } = {
tutorials: [
{
invoice_date: "18 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "19 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "20 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "21 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "22 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
{
invoice_date: "23 Oct 2021",
company: "ABC Enterprise",
invoice_no: "INV/ABC/21-22/109",
},
],
totalPages: 1,
};
setTutorials(tutorials);
};
useEffect(retrieveTutorials, []);
const columns = useMemo(
() => [
{
Header: "Date",
accessor: "invoice_date",
},
{
Header: "Vendor",
accessor: "company",
},
{
Header: "Invoice No.",
accessor: "invoice_no",
},
],
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({
columns,
data: tutorials,
});
return (
<div>
<table {...getTableProps()}>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>{column.render("Header")}</th>
))}
</tr>
))}
</thead>
{tutorials.length > 0 ? (
<tbody {...getTableBodyProps()}>
{rows.map((row, i) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => {
return (
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
);
})}
</tr>
);
})}
</tbody>
) : (
<tbody>
<tr>
<td colSpan="8">
<figure className="noRecord-found"></figure>
<span className="norecord-text">No records found</span>
</td>
</tr>
</tbody>
)}
</table>
</div>
);
};
export default App;

Here we are using useState, useEffect, useMemo hooks.

useState : The useState hook is a special function that takes the initial state as an argument and returns an array of two entries. Syntax: The first element is the initial state and the second one is a function that is used for updating the state. … And the value returned by the function will be used as the initial state.

useEffect : What does useEffect do? By using this Hook, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our "effect"), and call it later after performing the DOM updates.

useMemo : React has a built-in hook called useMemo that allows you to memoize expensive functions so that you can avoid calling them on every render. You simple pass in a function and an array of inputs and useMemo will only recompute the memoized value when one of the inputs has changed.

useTable : useTable is the root hook for React Table. To use it, pass it with an options object with at least a columns and data value, followed by any React Table compatible hooks you want to use.

getTableProps : This function is used to resolve any props needed for your table wrapper.

getTableBodyProps : This function is used to resolve any props needed for your table body wrapper.

headerGroups : An array of normalized header groups, each containing a flattened array of final column objects for that row.

rows : An array of materialized row objects from the original data array and columns passed into the table options.

prepareRow : This function is responsible for lazily preparing a row for rendering. Any row that you intend to render in your table needs to be passed to this function before every render.

Why? Since table data could potentially be very large, it can become very expensive to compute all of the necessary states for every row to be rendered regardless if it actually is rendered or not (for example if you are paginating or virtualizing the rows, you may only have a few rows visible at any given moment). This function allows only the rows you intend to display to be computed and prepped with the correct state.

So this was all about implementing the basics of React Table using useTable. I hope you have understood the example.

You can also check out YouTube channel: https://www.youtube.com/channel/UCOWT2JvRnSMVSboxvccZBFQ

How to Encrypt and Decrypt in Node JS using Crypto

stemword — Sat, 16 Oct 2021 17:41:49 +0000

In this article, you’ll learn how to use the Node.js crypto module to perform cryptographic operations on data. I'll show you how to encrypt data with a secret key and then decrypt it using the same secret key when required.
You can also check video on YouTube.
https://www.youtube.com/watch?v=9PL7EK4jXLM

Create a new project

Create a new directory in your local file system and switch to it by typing the following

mkdir encr_decr && cd encr_decr
npm init -y

Now install the crypto module

npm install crypto --save

Now make app.js.

Add following code to app.js

var Crypto = require('crypto');
var secret_key = 'fd85b494-aaaa';
var secret_iv = 'smslt';
var encryptionMethod = 'AES-256-CBC';
var key = Crypto.createHash('sha512').update(secret_key, 'utf-8').digest('hex').substr(0, 32);
var iv = Crypto.createHash('sha512').update(secret_iv, 'utf-8').digest('hex').substr(0, 16);
var encryptedMessage = encrypt_string("hello", encryptionMethod, key, iv);
console.log(encryptedMessage); 
// output : L2dOZjlDVmxoSDNWdmpVMkNGd0JEdz09
var decrptMessage = decrypt_string(encryptedMessage, encryptionMethod, key , iv);
console.log(decrptMessage);  
//output : hello

function encrypt_string(plain_text, encryptionMethod, secret, iv) {
  var encryptor = Crypto.createCipheriv(encryptionMethod, secret, iv);
  var aes_encrypted = encryptor.update(plain_text, 'utf8', 'base64') + encryptor.final('base64');
  return Buffer.from(aes_encrypted).toString('base64');
};

function decrypt_string(encryptedMessage, encryptionMethod, secret, iv) {
  const buff = Buffer.from(encryptedMessage, 'base64');
  encryptedMessage = buff.toString('utf-8');
  var decryptor = Crypto.createDecipheriv(encryptionMethod, secret, iv);
  return decryptor.update(encryptedMessage, 'base64', 'utf8') + decryptor.final('utf8');
};

Conclusion

In this article, we looked at how to perform cryptographic operations on a text by using Node.js built-in crypto module.