Category: Learning

How to fix Uncaught TypeError: Cannot assign to read only property ‘0’ of object occurring in JavaScript?

Hello,

This type error mostly get in scenario when you try to sort the readyonly data array.

For me this was occoured when I tried to sort the direct result from my GraphQL query response data like below:

const sortedData = data.bhangarwalas.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In above, data.bhangarwalas is graphql query response results which is readonly in nature as response.

To fix this issue the solution is quick fix for which I have too google to know the result!

Error Screenshot Uncaught TypeError: Cannot assign to read only property ‘0’ of object ‘[object Array]’

Here is the quick solution:

const sortedData = [...data.bhangarwalas];
      sortedData.sort((a, b) => a?.firstname > b?.firstname ? 1 : -1);

In code above, We need to clone or you in other words, copying the “data.bhangarwalas” into new array variable and then over that variable, we need to perform sorting operation, which results us right response.

Hope this help you to solve the quick error or to know what scenario this type of error is generated.

Thanks for reading.

Happy learning!

What to do when you don’t quickly find UTS scan code at a Mumbai Railway Station you are at?

Hello,

You are facing too? Not to worry.

The challenge of finding UTS Mumbai Station Scan QR scan code if you are standing at other the end of the station where UTS scan code is not available quickly.

Just quickly jump over to this site : MUMBAI RAILWAY STATION UTS SCAN CODE find the station and scan the code right away and Book your ticket from UTS App.

UTS Scan code Mumbai [Western|Centeral|Eastern]

Incase if you not find the UTS Scan code you can quickly drop a note to them at  utsqrscan@doableyo.com to add your favorite station QR code on the list!

Hope this helps.

Thanks for visiting. Please share with your friends and family if you love their work!

What to do when you get nextjs error (Module not found: Error: Can’t resolve ‘private-next-pages/’ in ‘/vercel/path0’) on vercel/nextjs deployment?

Hello,

If you too facing this error : Module not found: Error: Can’t resolve ‘private-next-pages/’ in ‘/vercel/path0’

while deploying your NextJs project over Vercel platform, please follow what solution and mistake I was doing.

Error Screenshot of error occurring from the NextJs Project deployment on vercel platform.

As, I tried to debug this error by right away check the the next in the log highlighted (in screenshot above) recommending to following alias rule to be set if you have touched you next.config.js file with any webpack settings.

In my case I did have to touched the next.config.js file and so I have add the same lines of code recommend in the follow link of Next.js doc

https://nextjs.org/docs/messages/invalid-resolve-alias

But for me still I didn’t found the right solution, because was in the naming of folder under nextjs project.

Basically, I was loading the static content into the dynamic route in Nextjs (Like example reference here).

What I have missed was the name of the folder under pages directory I have created named as “learn” it should be similar to name “posts” as created one at root level of the project to hold the “.md” or “.html” file content to pass down to dynamic route page which will be under /pages/posts/[id].js

Sharing here screenshot of the directory where the naming was a mistake

Here highlighted “learn” folder should be same as “posts” below

After renaming the folder name “learn” to “posts” the error went off and found my deployment working successfully.

Hope this small mistake tip help you to solve this problem.

If you have found any mistake in the post. Please don’t hesitate to hit me on my email jat@doableyo.com to rectify.

Enjoyed reading this? How about sharing with your friends or in groups, this would help!

Thanks, Happy Learning!

ReactJS Component Skeleton for Register/Create Account

Hello,

Welcome, here is how you can create a get to started ReactJS Register/Create Account component from scratch with very basic fields for your website or application.

import React from "react";

function CreateAccount() {

    const [formValues, setFormValues] = useState({
        role: '',
        name: '',
        mobile: '',
        email: '',
        password: '',
        confirmPassword: ''
    });

    const handleInputChange = e => {
        const { name, value } = e.target;
        setFormValues({ ...formValues, [name]: value });
    };

    const handleSubmit = e => {
        e.preventDefault();
        // You can perform your form submission logic here
        console.log(formValues);
    };

    return (<>
        <div className="card">
            <div className="card-body">
                <form method="POST" action="https://doableyo.com/atamsamagam/admin/register">
                    {/* <input type="hidden" name="_token" defaultValue="zdDR1NfxywhlhmpIqNTZ7uNUvl1luoUe7X0N6GOh" /> 
                        for CSRF!
                    */}
                    <div className="form-group row">
                        <label htmlFor="role" className="col-md-4 col-form-label text-md-right">Role</label>
                        <div className="col-md-6">
                            <select id="role" name="role" className="form-control  text-capitalize" required autoComplete="role" autofocus>
                                {/* need a fix of admin */}
                                <option value="user">user</option>
                                <option value="admin">admin</option>
                            </select>
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="name" className="col-md-4 col-form-label text-md-right">Name</label>
                        <div className="col-md-6">
                            <input id="name" type="text" className="form-control " name="name" defaultValue required autoComplete="name" autofocus />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="mobile" className="col-md-4 col-form-label text-md-right">Mobile</label>
                        <div className="col-md-6">
                            <input id="mobile" type="number" required minLength={10} maxLength={10} className="form-control " name="mobile" defaultValue autoComplete="mobile" />
                            <small>Enter without country code or + character</small>
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="email" className="col-md-4 col-form-label text-md-right">E-Mail Address</label>
                        <div className="col-md-6">
                            <input id="email" type="email" className="form-control " name="email" defaultValue required autoComplete="email" />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="password" className="col-md-4 col-form-label text-md-right">Password</label>
                        <div className="col-md-6">
                            <input id="password" type="password" className="form-control " name="password" required autoComplete="new-password" />
                        </div>
                    </div>
                    <div className="form-group row">
                        <label htmlFor="password-confirm" className="col-md-4 col-form-label text-md-right">Confirm Password</label>
                        <div className="col-md-6">
                            <input id="password-confirm" type="password" className="form-control" name="password_confirmation" required autoComplete="new-password" />
                        </div>
                    </div>
                    <div className="form-group row mb-0">
                        <div className="col-md-6 offset-md-4">
                            <button type="submit" className="btn btn-primary">
                                Create
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </>)
}

export default CreateAccount;

Source: Self Learned & AI ChatGPT Channel

Happy learning!

Picture tag in HTML

The <picture> tag in HTML is a semantic element that is used to define multiple source images for a single content. The <picture> element is used to specify multiple sources for an image, allowing the browser to choose the most appropriate source based on the user’s device and screen size. This allows you to display images that are optimized for different devices, without having to rely on JavaScript or CSS media queries.

Here’s an example of how you might use the <picture> tag:

<picture >
  < source srcset="large.jpg" media="(min-width: 800px)">
  < source srcset="small.jpg" media="(max-width: 799px)">
  < img src="small.jpg" alt="A picture">
</ picture >

In this example, the < source > elements define different sources for the image, based on the screen size of the user’s device. If the screen is at least 800 pixels wide, the browser will choose the large.jpg image, while if the screen is smaller than 800 pixels, it will choose the small.jpg image. The <img> element is used as a fallback for browsers that do not support the <picture> element.

hope you understand the basic concepts and use of Picture Tag in HTML

Source: AO Interaction Channel

What is the life cycle of an HTML request

Hello, Welcome

The life cycle of an HTML request can be divided into following stages:

  1. Request initiation: The request is initiated by the browser, usually in response to a user action, such as clicking a link, submitting a form, or refreshing the page.
  2. DNS Lookup: The browser checks the local cache and DNS servers to resolve the domain name to an IP address. If the domain name has not been resolved before, the browser will initiate a DNS lookup to obtain the IP address of the server.
  3. TCP Connection: The browser establishes a TCP connection with the server. This is the underlying communication channel that will be used to send the HTTP request and receive the response.
  4. Request sent: The browser sends an HTTP request to the server. The request includes information about the type of operation being performed (e.g., GET, POST, PUT, DELETE), the URL being requested, and any additional data that may be required (e.g., form data).
  5. Server processing: The server receives the request and processes it. This may involve retrieving data from a database, processing data, or generating a response.
  6. Response sent: The server generates an HTTP response and sends it back to the browser. The response includes information about the status of the request, the type of data being returned, and the actual data itself.
  7. Response received: The browser receives the response and processes it. This may involve updating the contents of the page, displaying an error message, or redirecting to another page.
  8. Resource loading: If the response includes references to additional resources (e.g., images, stylesheets, scripts), the browser will initiate separate requests for each of these resources.
  9. Page rendering: The browser uses the information in the response to render the final page.

This entire process can take place in a matter of milliseconds, allowing the user to interact with the web page in near-real-time.

Source: AI Interaction Channel

Happy learning!

How to write basic Test case for React component using Jest or Enzyme

Lets quickly straight dive into it

import React from "react";
import { shallow } from "enzyme";
import TestComponent from "./TestComponent";

describe("TestComponent", () => {
  it("renders correctly", () => {
    const wrapper = shallow(<TestComponent />);
    expect(wrapper).toMatchSnapshot();
  });

  it("contains a button", () => {
    const wrapper = shallow(<TestComponent />);
    expect(wrapper.find("button").length).toEqual(1);
  });

  it("simulates click events", () => {
    const mockCallBack = jest.fn();
    const wrapper = shallow(<TestComponent handleClick={mockCallBack} />);
    wrapper.find("button").simulate("click");
    expect(mockCallBack.mock.calls.length).toEqual(1);
  });
});

In this example, the describe block creates a test suite for the TestComponent and the it blocks define individual test cases.

The shallow function from Enzyme is used to render a shallow version of the component.

The toMatchSnapshot assertion is used to check that the component is rendering correctly.

The find method is used to locate elements within the shallow render, and the simulate method is used to trigger events on those elements.

The jest.fn function is used to create a mock callback that can be passed as a prop to the component and tested.

Happy Learning.

10 Key tips on preparing for ReactJS Interview

Hello,

Lets quickly go through the 10 keys, for preparing for React Js Interview

  1. React basics: Familiarize yourself with React concepts such as components, JSX, state, props, lifecycle methods, hooks, etc.
  2. React-Redux: Understand how to use Redux with React for state management.
  3. React Router: Learn how to handle routing in React applications.
  4. React performance optimization: Know how to optimize the performance of React applications, including techniques like lazy loading, memoization, and using shouldComponentUpdate.
  5. React hooks: Knowledge of React hooks and how they can be used in place of class components.
  6. React testing: Understand how to test React components using tools like Jest and Enzyme.
  7. Familiarity with CSS: Good understanding of CSS, including CSS-in-JS solutions like styled-components.
  8. JavaScript concepts: Good understanding of JavaScript concepts like closure, asynchronous programming, and ES6 syntax.
  9. Git: Knowledge of Git and how to use it for version control.
  10. Problem solving skills: Be prepared to solve algorithmic problems and explain your thought process.

Hope you enjoy learning!

Very basic of How to create a React Fiber/React Js Project from scratch

Here is the basic process to create a project with React Fiber:

  1. Install Node.js and npm (Node Package Manager) if you don’t have them installed already.
  2. Use npm to create a new React project by running the following command in your terminal or command prompt:
    npx create-react-app my-app
  3. Navigate to the newly created project directory:
    cd my-app
  4. Start the development server by running:
    npm start
  5. The development server should now be running on http://localhost:3000 in your browser.
  6. You can now start building your React Fiber application by modifying the files in the src directory.
  7. When you’re ready to deploy your application, run the following command to create a production build:
    npm run build

This should give you a basic understanding of how to create a React Fiber project. If you’re new to React, it may be helpful to go through some introductory tutorials before diving into your project.

Happy Learning!