React TypeScript document.getElementById always selects the first instance - reactjs

Question

I've got 2 of the same components being rendered
<div><Modal title='Join'/></div>
<div><Modal title='Login'/></div>
the modal components is like this
import React, {useState} from 'react';
import {Join} from './join';
import {Login} from './login';
interface propsInterface {
title: string;
}
const Modal: React.FC<propsInterface> = (props) => {
const [state, setState] = useState({showLogin: props.title === "login" ? false : true});
let modalState = false;
function toggleLogin(event: any) {
setState({...state, showLogin: !state.showLogin});
}
function toggleModal(event: any) {
if (event.target.id !== 'modal') return;
modalState = !modalState;
const modal = document.getElementById('modal'); <<==this always selects the first one
const card = document.getElementById('card'); <<==this always selects the first one
if (modal && card && modalState === true) {
modal.style.display = "flex";
modal.animate([{backgroundColor: 'rgba(0, 0, 0, 0)'}, {backgroundColor: 'rgba(0, 0, 0, 0.6)'}], {duration: 200, easing: 'ease-in-out', fill: 'forwards'});
card.animate([{opacity: 0}, {opacity: 1}], {duration: 200, easing: 'ease-in-out', fill: 'forwards'});
card.animate([{transform: 'translateY(-200px)'}, {transform: 'translateY(0)'}], {duration: 200, easing: 'ease-in-out', fill: 'forwards'});
}
if (modal && card && modalState === false) {
modal.animate([{backgroundColor: 'rgba(0, 0, 0, 0.6)'}, {backgroundColor: 'rgba(0, 0, 0, 0)'}], {duration: 200, easing: 'ease-in-out', fill: 'forwards'});
card.animate([{opacity: 1}, {opacity: 0}],{duration: 200, easing: 'ease-in-out', fill: 'forwards'});
card.animate([{transform: 'translateY(0)'}, {transform: 'translateY(-200px)'}], {duration: 200, easing: 'ease-in-out', fill: 'forwards'});
setTimeout(() => modal.style.display = "none", 200);
}
}
return (
<div>
<div className='modal' id='modal' onClick={toggleModal}>
<div className='card' id='card'>
{props.title}
{state.showLogin
? <Login toggleLogin={toggleLogin} toggleModal={toggleModal}/>
: <Join toggleLogin={toggleLogin} toggleModal={toggleModal}/>}
</div>
</div>
<div onClick={toggleModal} className='modal-title' id='modal'> {props.title}</div>
</div>
);
}
export {Modal};
Because there are 2 of this component now in the dom when I use
const modal = document.getElementById('modal');
the first instance of the component works as expected but the second instance is selecting the first instance not the second instance.
Is there a way to getElementById but only in this component?

Answer 1

You should only ever have one element with a given id in the same page, in your case you may want to use classes and use document.getElementsByClassName("classname") which is going to return an array of elements with the given class name.
Hope this helps

Answer 2

Instead of setting the Id as 'modal', you can pass id of your field as props and then set its id attribute.Then use getElementById for them.
Your can do like this:
<Modal title='Join' UniqId="modal1"/>
<Modal title='Login' UniqId="modal2"/>
Then in your component, you can do something like this:
<div className='modal' id={props.UniqId} onClick={toggleModal}>
After that, in your JS file, you can use this id:
const modal1 = document.getElementById('modal1');
const modal2 = document.getElementById('modal2');

Answer 3

The way that you are doing it looks like you are still using the mindset of using vanilla JavaScript to manipulate DOM elements after events.
Generally in the React world, you should be linking everything into your render() methods which are raised every time the state or the properties change within a react component.
So what I would do in your situation is remove all your code which is grabbing DOM elements, e.g. your document.getElementById code, and purely work from your state change. I am sorry that this won't be complete code, as I am not sure what your UI is supposed to look like.
const Modal: React.FC<propsInterface> = (props) => {
const [state, setState] = useState({ showLogin: props.title === "login" ? false : true, showModal: false, showCard: false });
function toggleLogin() {
setState({ showLogin: !state.showLogin });
}
function toggleModal() {
setState({ showModal: !state.showModal, showCard: !state.showCard });
}
const modalClassName = state.showModal ? 'modal show' : 'modal';
const cardClassName = state.showLogin ? 'card show' : 'card';
return (
<div>
<div className={modalClassName} onClick={toggleModal}>
<div className={cardClassName}>
{props.title}
{state.showLogin
? <Login toggleLogin={toggleLogin} toggleModal={toggleModal}/>
: <Join toggleLogin={toggleLogin} toggleModal={toggleModal}/>}
</div>
</div>
<div onClick={toggleModal} className='modal-title' id='modal'> {props.title}</div>
</div>
);
}
Effectively what happens is that when the toggleModal method is called, it just toggles the two state properties between true/false. This causes the component to re-render, and the class names change on the div elements.
From this, you will need to move all your animations into your css file and probably make use of animations in there (css animations are not my greatest skill). It's not a simple change to what you have, but I would always keep my styling and animations outside of a component and in a css file, and always work from rendering rather than trying to manipulate react nodes after render.