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

  1. 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.
  2. 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)

Inserting a space at a specific index of a string – JavaScript

By using slice() method :

let s = "12:40:22AM";
 
let indexPosition = s.length - 2;

let result = s.slice(0, indexPosition) + " " + s.slice(indexPosition);

console.log(result);

// 12:40:22 AM (space is added before AM)
Explanation :

1. s = "12:40:22AM"
2. indexPosition = 10 - 2 = 8
3. result = 12:40:22 + " " + AM = 12:40:22 AM