Learners Store

What is the difference between npm and yarn ?

NPM stands for Node Package Manager.
YARN stands for Yet Another Resource Negotiator.

Both NPM and YARN are package managers for public or private packages.

YARN was developed by Facebook to fix performance and security issues with npm.

NPM generates package-lock.json file
YARN generates yarn.lock file

NPM installs dependencies Sequentially.
YARN installs dependencies parellelly.

NPM maintains global package cache, which stores downloaded packages. This global cache shares across all projects, which saves disk space and reduce redundant downloads.
YARN maintains cache for each project seperately. Which increases reliability and ensures consistent package versions.

typeError: cannot read properties of undefined (reading ‘join’)

We should apply the join method only on Array. So before applying the join method, first we need to check that the output is coming in the form of array or not.
if you are using any online code editor, check that you should use return instead of console.log. May be in the background they are applying the join method. So, for that they don’t want log reports. We need to return the output and the output should be in the form of Array to apply the Join method.

Mock a function or setState using jest in ReactJS.

lets assume that we need to mock setStatus(). So, in test file we will mock by using jest as follows.

const setStatus = jest.fn();

const renderUserProfile = (props = {}) => {
    return render(
                <UserProfile status={true} setStatus={setStatus} />
              )
    }

const userProps1 = Props = {
 status: true,
 setStatus
}

const userProps2 = Props = {
 status: false,
 setStatus
}

describe('Component UserProfile', () => {
  it("user status with true", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Online");
    fireEvent.click(userProps1);
    expect(setStatus).toHaveBeenCalled();
  });
  it("user status with false", () => {
    renderUserProfile(userProps1);
    const buttonElement = screen.getByRole("button").toHaveContext("Offline");
    fireEvent.click(userProps2);
    expect(setStatus).toHaveBeenCalled();
  });

})

Displaying comma separated elements using map function from Array of Objects – ReactJS

lets take an example of the following Array

const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

lets use map function to display names of class-5 in the same row.

App.js


import React from "react";
import "./style.css";

export default function App() {
  const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

const recipientUnitNumber= students?.map((s)=>s.name);

  return (
    <div>
      <p>{recipientUnitNumber}</p>
    </div>
  );
}

Output : ABC

if we use .toString() to the map function, comma separated names will display.

import React from "react";
import "./style.css";

export default function App() {
  const students = [
    {
        "class": 5,
        "name": "A",
    },
    {
        "class": 5,
        "name": "B",
    },
    {
        "class": 5,
        "name": "C",
    }
]

const recipientUnitNumber= students?.map((s)=>s.name).toString();

  return (
    <div>
      <p>{recipientUnitNumber}</p>
    </div>
  );
}


Output : A,B,C

Converting time from 12-hour AM/PM format to 24-hour format without AM/PM – JavaScript

By using toLocaleTimeString() :

let time = "11:40:22 PM";
let date = new Date(`01/01/2022 ${time}`); 
let formattedTime = date.toLocaleTimeString('en-GB')
console.log(formattedTime)

// 23:40:22

Explanation : 

1. time = "11:40:22 PM"
2. date = 2022-01-01T23:40:22.000Z (we can give any date as we are converting only time)
3. formattedTime = 23:40:22 ("en-GB" means 24-hour time without AM/PM)