Error: Attempting to access the 'classList' property of an undefined value

Struggling with a form Login issue while working on React. The error I keep encountering is:

TypeError: Cannot read property 'classList' of undefined

The problematic snippet in my code is as follows:

changeState(){

    const {isLogginActive} = this.state;
    if(isLogginActive) {
      this.rightSide.classList.remove("right");
      this.rightSide.classList.add("left");
    } else {
      this.rightSide.classList.remove("left");
      this.rightSide.classList.add("right");
    }
    this.setState((prevState)=> ({ isLogginActive: !prevState.isLogginActive }));
  }

If anyone has encountered this issue and found a way to resolve it within the React framework, I would greatly appreciate your help.

Thank you.

javascripthtmlcssreactjssass

Answer №1

If rightSide is a property created using the createRef API, then you can access the classList through the current attribute of the ref.

this.rightSide.current.classList

Since createRef() works asynchronously, it may return null if accessed too early in methods like componentDidMount. It's best to include an if statement to check for the existence of current.

changeState(){
  const {isLogginActive} = this.state;
  if (this.rightSide.current) {
    if(isLogginActive) {
      this.rightSide.current.classList.remove("right");
      this.rightSide.current.classList.add("left");
    } else {
      this.rightSide.current.classList.remove("left");
      this.rightSide.current.classList.add("right");
    }
    this.setState((prevState)=> ({ isLogginActive: !prevState.isLogginActive }));
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting problem with static divs not scrolling properly within an iframe on iOS devices

I'm encountering an issue with iOS scrolling on my iPad. All other platforms I've tested work perfectly fine except for this one. While I have a love-hate relationship with iOS, I managed to make the entire iframe content scroll within the parent ...

ioshtmlcss

Ext 4.1 - Accessing a class instance using Ext.define()

In my code, I have a class with a method defined like this: Ext.define('MY.class.Manager', { .... .... .... manageStuff: function(){ } } Initially, the manageStuff function was only needed in one place and everything worke ...

javascriptextjs

What is the best way to merge two values with the same property in an object using a comma as a separator

Is it possible to combine the values of properties with a separator in my scenario? Here is an example of my JSON structure: { "name": "aa", "name": "bb", "name1": "cc", "name2": "dd" } I am looking to display the values of the key 'name&apo ...

javascriptangularjshtml

Is there a way to implement a local gltf loader in three.js to display on a GitHub server within my repository?

Every time I run code on my VS app, it works perfectly fine. However, when I try running it on GitHub, it shows an error 404 and gets aborted. I came across some documentation regarding this issue, but I'm having trouble understanding it. Check out ...

javascriptgithubthree.jsgltfrepo

Does every part have an unidentified index?

Similar Issue: PHP: "Notice: Undefined variable" and "Notice: Undefined index" This dilemma has puzzled me for three days now, and I'm at a loss on how to resolve it as I keep receiving... Notice: Undefined index: surname in C:\xampp\ ...

phphtml

The Angular HTTP POST request is not transmitting any data - there is no body visible even in the Chrome debugger

I'm completely baffled by this situation. It's a routine task for me, yet I can't figure out why it's failing in such a strange way. It seems like it's going to be something trivial, but it's not the typical "no data on the se ...

javascriptangularjs

Is it possible to integrate Redux with MongoDB for a single project?

I recently began learning NodeJS and MongoDB after studying React and Redux. I was wondering if MongoDB completely replaces Redux, or if they serve different purposes. Can you clarify what data should be stored in Redux versus MongoDB? ...

node.jsreactjsdatabasemongodbredux

What is the best way to ensure that a mapped type preserves its data types when accessing a variable?

I am currently working on preserving the types of an object that has string keys and values that can fall into two possible types. Consider this simple example: type Option1 = number type Option2 = string interface Options { readonly [key: string]: Op ...

javascripttypescripttypes

I am searching for a tool in ThreeJS that functions similar to AxisHelper, possibly a Helper class or utility

While working with Three.js, I have come across many helpful Helper classes that greatly simplify displaying and modifying the scene. However, there is one particular tool that I am struggling to find again. It is similar to the AxisHelper, but it includes ...

javascript3dthree.js

Tips for incorporating automatic line breaks and setting a maximum column width in a table

Is there a way to set different maximum widths for table columns and enable automatic line breaks when entering text into the columns? Below is the code snippet I currently have: echo "<table border='1' cellpadding='10'>"; echo ...

phphtmlhtml-tablewidth

The standard React Favicon appears in PDF view instead of the custom one intended

I am encountering an issue with the file structure in my React App's public folder. Here is a glimpse of the structure: https://i.sstatic.net/FjT0z.png Although I have successfully added a custom favicon to replace the default React one, it displays ...

htmlreactjsmaterial-uifavicon

Transmit the IP address from the frontend using ReactJS to the server via NodeJS

Currently, I am utilizing WEBRTC to retrieve the IP address from the client side. I have been encountering difficulties with browsers such as Internet Explorer. I prefer not to rely on external third-party servers for obtaining the IP address. Is there a ...

reactjsipclient

Unable to make jQuery animate top function work

I have three rectangles set up like this. I've managed to make them disappear when clicking the close button on the right side of each rectangle, but I'm struggling with getting the remaining rectangles to move upward to fill the empty space. Her ...

jqueryhtmlcss

Creating a dynamic HTML table in Django by populating it with values from iterative lists

Currently, in the Django framework, I am endeavoring to construct a table using the values stored within a list: List : [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [3, 3, 3, 3]]. The envisioned table layout is as follows: Below is the code snippet that ...

pythonhtmldjango

Error Encountered: "fsevents is not defined" during ReactJS Test

I've been working on writing test cases for my program and I recently came across recommendations for testing-library/react and jest-junit. After installing both packages using npm as devDependencies and updating my test script to "test": 'react- ...

reactjsunit-testingnpmtypeerrorreact-scripts

Tips for storing the output of a script URL in a JavaScript variable

I am currently facing an issue with running a script in the 'head' element of a webpage. The script makes an API call to a specific URL and retrieves results in the form of a JavaScript array. However, I am encountering difficulty because the API ...

javascripthtmldom

An issue encountered while submitting the contact form using jQuery AJAX

After coming across this question, I decided to update my contact form script. The main objective is to display a send button labeled as send. When clicked, the button should show sending until the PHP script finishes processing. Once completed, it should ...

phpjqueryhtmlajaxforms

The Chrome file storage system saves information in files

My challenge is to save data obtained from the Chrome geolocation API into a text file using the Chrome fileSystem API. However, despite successfully creating a file, it remains empty after the process. To simplify, I attempted to add the string '1234 ...

javascriptgoogle-chromeweb-applicationsgoogle-chrome-storage

the current situation is that the nowjs initialize function is not working as

var express = require('express'); var app = express(); var nowjs = require('now'); app.get('/', function(req, res) { res.send('index'); }); var server = app.listen(4000); /* Setting up now.js to broadcast functio ...

javascriptexpresswebsocketsocket.ionowjs-sockets

Converting a json array into a map with the help of Underscore.js

My challenge involves parsing a JSON array into a map object, with the key being the state and the value being an array of objects that share the same state. An example JSON data set is provided below: { "totalRec": 10, "content": [ { "name" ...

javascriptunderscore.js