The animation for the login and registration modal is malfunctioning and not functioning as

Question

The animation for the login and registration modal is malfunctioning and not functioning as

I am currently working on implementing a login/register modal in React, inspired by a TypeScript example I came across.

This is how the login section looks:

https://i.sstatic.net/ECvv9.png

The goal is to:

When the "Sign up" button is clicked, it should trigger a transition where the orange section transforms into a signup form, and the left side turns into an orange layout for signing in.

Currently, I have managed to create the login layout, but clicking on the signup button is not producing any action.

At this point, the code is giving an error about this.container.current not having a .current.

Below is the provided code:

import React from "react";
import { Modal } from "react-bootstrap";
...

Additionally, here is the corresponding CSS:

h1 {
    font-weight: bold;
    margin: 0;
}
...

It seems like there is a small link missing to connect everything together and make it functional.

For reference, I started with the following codepen link: https://codepen.io/FlorinPop17/pen/vPKWjd

javascript css reactjs

Answer 1

Answer №1

It's best to avoid directly manipulating the DOM, as React is designed to handle those tasks for you. You likely won't need to interact with the DOM manually very often.

When working with class components, the proper way to create a reference to an element is through React's createRef() method. It's worth considering if you truly need a ref in your specific scenario:

const myRef = React.createRef();
...
<button ref={myRef} style={whiteBtnStyle} class="ghost" id="signUp">Sign Up</button>

When attaching event handlers in JSX, the preferred approach in React is to use inline event handlers:

<button onClick={onSignUpClick} style={whiteBtnStyle} class="ghost" id="signUp">Sign Up</button>

Instead of defining inline functions directly in your JSX, consider declaring instance methods within your component to prevent unnecessary function recreation on each render:

onSignUpClick = () => {
   this.setState({
     rightPanelActive: true
   });
}

Don't forget to utilize className instead of class when binding CSS classes in JSX to avoid conflicts with JavaScript's reserved keywords:

<div className={`container ${this.state.rightPanelActive ? "right-panel-active" : ""`} id="container">

Lastly, be cautious when using ids for elements to ensure they are unique throughout your page. Duplicate ids, such as in separate modal components, can lead to invalid HTML:

Answer 2

It's best to avoid directly manipulating the DOM, as React is designed to handle those tasks for you. You likely won't need to interact with the DOM manually very often.

When working with class components, the proper way to create a reference to an element is through React's createRef() method. It's worth considering if you truly need a ref in your specific scenario:

const myRef = React.createRef();
...
<button ref={myRef} style={whiteBtnStyle} class="ghost" id="signUp">Sign Up</button>

When attaching event handlers in JSX, the preferred approach in React is to use inline event handlers:

<button onClick={onSignUpClick} style={whiteBtnStyle} class="ghost" id="signUp">Sign Up</button>

Instead of defining inline functions directly in your JSX, consider declaring instance methods within your component to prevent unnecessary function recreation on each render:

onSignUpClick = () => {
   this.setState({
     rightPanelActive: true
   });
}

Don't forget to utilize className instead of class when binding CSS classes in JSX to avoid conflicts with JavaScript's reserved keywords:

<div className={`container ${this.state.rightPanelActive ? "right-panel-active" : ""`} id="container">

Lastly, be cautious when using ids for elements to ensure they are unique throughout your page. Duplicate ids, such as in separate modal components, can lead to invalid HTML:

The animation for the login and registration modal is malfunctioning and not functioning as

Answer №1

Similar questions

Merge Razor with Ajax and JSON

Node.js impressively stores files without file extensions

What is the process for sending a JSON response and then redirecting to an HTML page after a successful event in Node.js using Express?

Hold off on addressing the nested loops within a TypeScript subscription

Encountering a problem with the getJSON() function within the app.js file connected to a solidity

Setting up Apache VirtualHost to work with Create-React-App

Creating a resilient node websocket client with enhanced security (overcoming the challenge of verifying the initial certificate)

What is the process of embedding a string with pug code into a pug file?

"Exploring the power of JQuery in adding new elements and accessing the newly appended

Transform the text with a stylish touch within a 'textarea' element

React- Struggling to modify state from child component using function declared within a parent component

What could be causing the Express error when this.props.param.match.id is coming up as undefined?

Steps to turn off fancybox for mobile and show the full image instead

Angular directive ng-if on a certain path

When using `element.addEventListener`, event.target will be the target

Looking for a Horizontal Layout?

Is it possible to use one table as a background and place another table on top of it?

Several mistakes occurred involving auth0, react, apollo, babel, and webpack

Tips on how to prevent certain classes from being impacted by a hue-rotate filter applied to all elements on a webpage

The FormData object appears to be blank, even though it was supposed to be populated when attempting to send a PDF file using a multipart FormData POST request in Cypress