I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet -
<div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} id="tab" ></div>
However, I'm facing an issue where the CSS styling associated with it disappears. Interestingly, the rest of the page seems to be functioning properly, ruling out any linking problems with the CSS file. Strangely enough, when I only utilize the ID attribute instead of the class names, the styles work perfectly fine. The problem arises only when I use class names in the CSS, as the styles vanish completely, not even appearing in the developer tools when inspected. Although the class names are visible within the HTML section of the developer tools, they do not reflect the CSS properties.
To implement this conditional logic, I am utilizing a simple useState Hook as shown below -
const [page, setPage] = useState([{
login: true,
signUp: false
}])
Below is the corresponding CSS code snippet -
#tab .changeTab .leftSide{
position: absolute;
height: 100%;
width: 50%;
left: 0;
background: -webkit-linear-gradient(right,#4361ee,#4cc9f0);
transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
border-radius: 5px;
}
#tab .changeTab .rightSide{
position: absolute;
height: 100%;
width: 50%;
left: 0;
background: red;
margin-left: -50%;
transition: all 0.6s cubic-bezier(0, 1.17, 0, 0.69);
border-radius: 5px;
}
Being relatively new to react, I would greatly appreciate any guidance or assistance regarding this matter.