Develop Reference

Console.log is telling me my div is null when I try and add a class to it

I'm adding a keydown eventlistener that'll simply make my box div show. However, when I press a key, nothing happens and instead the console tells me, "Uncaught TypeError: box is null".
No idea what the problem is, please help
Here's my App.js:
import "./styles.css"
const box = document.querySelector(".box");
const notification = document.querySelector(".notif");
window.onload = document.addEventListener("keydown", e => {
box.classList.add("active");
notification.classList.add("inactive");
})
function App() {
return (
<>
<div className='notif'>Press Any Key</div>
<div className='box'>
<h2>20</h2>
<h1>Shift</h1>
</div>
</>
);
}
export default App;
and the css:
#import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
:root {
--teal: #00ccff;
--pink: #d400d4;
}
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
min-height: 100vh;
align-items: center;
justify-content: center;
background: #0e1538;
}
.box {
position: relative;
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.5);
overflow: hidden;
border-radius: 20px;
flex-direction: column;
display: none;
}
.box.active {
display: flex;
}
.box::before {
content: '';
position: absolute;
width: 150px;
height: 140%;
background: linear-gradient(var(--teal), var(--pink));
animation: animate 4s linear infinite;
}
#keyframes animate {
0%{
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box::after {
content: '';
position: absolute;
background: #0e1538;
inset: 4px;
border-radius: 16px;
}
.box h2 {
position: relative;
color: white;
font-size: 5em;
z-index: 10;
}
.box h1 {
position: relative;
color: white;
z-index: 10;
background: rgba(0,0,0,.5);
width: 97.5%;
text-align: center;
letter-spacing: 5px;
}
.notif {
font-size: 3em;
background: var(--teal);
padding: 0 20px;
border-radius: 20px;
}
.notif.inactive {
display: none;
}

You should be maintaining/updating state with the new class information when you press a key. Add the listener within the useEffect (along with a cleanup function). When a key is pressed the listener calls a function that updates the state (in this case switching the active/inactive classes). The component is re-rendered, and the elements' class names are changed using a little helper function.
const { useEffect, useState } = React;
function Example() {
// Initialise state
const [ active, setActive ] = useState({
box: false,
notification: true
});
// A function to update the state
function toggleActive() {
setActive(prev => ({
box: !prev.box,
notification: !prev.notification
}));
}
// An effect that adds a listener, w/ a cleanup function
useEffect(() => {
window.addEventListener('keydown', toggleActive);
return () => {
window.removeEventListener('keydown', toggleActive);
}
}, []);
// Returns the active status of the element from state
function isActive(type) {
return active[type] ? 'active' : 'inactive';
}
return (
<div>
<div className={isActive('notification')}>
Press Any Key
</div>
<div className={isActive('box')}>
<h2>20</h2>
<h1>Shift</h1>
</div>
</div>
);
}
ReactDOM.render(
<Example />,
document.getElementById('react')
);
.active { color: red; }
.inactive { color: black; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

import "./styles.css"
import {useEffect} from 'react'
function App() {
useEffect(()=>{
const box = document.querySelector(".box");
const notification = document.querySelector(".notif");
document.addEventListener("keydown", e => {
box.classList.add("active");
notification.classList.add("inactive");
})
},[])
return (
<>
<div className='notif'>Press Any Key</div>
<div className='box'>
<h2>20</h2>
<h1>Shift</h1>
</div>
</>
);
}
export default App;

The way to optimize react and Typescript codes

In this case, I used React + TypeScript and ant-design. The following code works perfectly but I want the codes to be summarized as much as possible. This is about starting a site that has 3 pages. For example, how can I write this part (const { id, title, description, background } = splash;) so that I don't need to define (splashs[index].background , splashs[index].title, splashs[index].description) all the time.
Thank you in advance for your cooperation.
.splash {
height: 100vh;
position: relative;
overflow: hidden;
}
.bg {
background-color: var(--cjp);
}
.BgGradiant {
background: linear-gradient(107.78deg, rgba(80, 21, 100, 0) 1.87%, rgba(80, 21, 100, 0.05) 18.6%, rgba(80, 21, 100, 0.51) 25.79%, #1C3396 99.02%, #1C3396 51.08%);
}
.context{
width: 80%;
}
.content {
text-align: center;
}
.content h1,
.content p {
color: var(--cwh);
}
.backgroundImage>img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
-o-object-fit: cover;
object-fit: cover;
}
.logo {
width: 100%;
text-align: center;
}
.btns {
display: flex !important;
align-items: center;
justify-content: space-between;
-webkit-margin-start: auto;
margin-inline-start: auto;
-webkit-margin-end: auto;
margin-inline-end: auto;
-webkit-margin-before: 2rem;
margin-block-start: 7rem;
}
.btns :global(.ant-btn){
background-color: var(--cwh);
border-radius: var(--borderRadius12);
position: relative;
padding: 4px 10px !important;
}
.btns :global(.ant-btn)::after{
content: "";
position: absolute;
width: 125%;
height: 125%;
top: 50%;
left: 50%;
border: 1px solid var(--chb);
border-radius: var(--borderRadius14);
transform: translate(-50%, -50%);
}
.btns :global(.ant-btn > span){
margin-left: 0 !important;
}
.btns :global(.ant-btn > span > svg){
fill: var(--cal);
}
.btnSkip {
background-color: unset;
outline: none;
border: none;
color: var(--cca);
}
.btnLogin{
-webkit-margin-before: 2rem;
margin-block-start: 7rem;
}
.btnLogin :global(.ant-btn){
border-radius: var(--borderRadius10);
background-color: var(--cwh);
color: var(--cjp);
}
.btnLogin :global(.ant-btn > span){
font-family: "Display-Bold";
}
.dots {
position: absolute;
bottom: 17%;
display: flex !important;
align-items: center;
justify-content: center;
left: 50%;
transform: translateX(-50%);
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.dotActive {
background-color: var(--cwh);
}
.dotDeActive {
background-color: var(--cca);
}
.dot:not(:last-child) {
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
.contentInner{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
-webkit-padding-before: 2rem;
padding-block-start: 2rem;
-webkit-padding-after: 3rem;
padding-block-end: 3rem;
}
.contentInner1{
justify-content: space-between;
}
.contentInner2{
justify-content: flex-end;
}
import React, { useState } from 'react';
import { useNavigate } from "react-router-dom";
import { Row, Col, Button } from 'antd';
import { ArrowRightOutlined } from '#ant-design/icons';
import Container from '../../Components/UI/Container/Container'
import classes from './Splash.module.css';
import { backgroundSplash1, backgroundSplash2, logoImage } from '../../Assets/index';
const Splash = () => {
let navigate = useNavigate();
const [index, setIndex] = useState<number>(0);
const {
splash,
bg,
BgGradiant,
context,
content,
backgroundImage,
logo,
btns,
btnLogin,
btnSkip,
dots,
dot,
dotActive,
dotDeActive,
contentInner,
contentInner1,
contentInner2,
} = classes
const splashs = [
{
id: 0,
title: 'Page 1 : title 1',
desctiption: '1- Lorem ipsum 1 ',
background: logoImage,
},
{
id: 1,
title: 'Page 2 : title 2',
desctiption: '2- Lorem ipsum 2 ',
background: backgroundSplash1,
},
{
id: 2,
title: 'Page 3 : title3',
desctiption: '3- Lorem ipsum 3',
background: backgroundSplash2,
}
];
const nextBnt = () => {
setIndex(index + 1);
if (index === splashs.length - 1) {
return navigate("/login");
}
}
const skipBtn = () => {
console.log('skip ');
return navigate("/login");
}
const loginBtn = () => {
return navigate("/login");
}
return (
<>
<Row>
<Col xs={24}>
<section
className={`${index === 0 ? bg : BgGradiant} ${splash}`}>
{
splashs.map((splash) => {
const { id, title, desctiption, background } = splash;
console.log(title, "title");
return (
<>
{
index !== 0 && (
<div className={backgroundImage}>
<img src={splashs[index].background} />
</div>
)
}
<Container key={id} className={backgroundImage}>
<div className={`${index === 0 ? contentInner1 : contentInner2} ${contentInner}`}>
{
index === 0 && (
<div className={logo}>
<img src={logoImage} alt="logoImage" />
</div>
)
}
<div className={context}>
<div className={content}>
<h1>{splashs[index].title}</h1>
<p>{splashs[index].desctiption}</p>
</div>
{/* BTNS */}
{
index === splashs.length - 1 ? (
<div className={btnLogin}>
<Button block onClick={loginBtn}>Login</Button>
</div>
) : (
<div className={btns}>
<button className={btnSkip} onClick={skipBtn}>skip</button>
<Button onClick={nextBnt}> <ArrowRightOutlined /></Button>
</div>
)
}
</div>
</div>
</Container>
</>
)
})
}
<div className={dots}>
{
Array.from({ length: 3 }).map((item, idx) => {
return (
<div key={idx} className={`${dot} ${index === idx ? dotActive : dotDeActive}`}></div>
)
})
}
</div>
</section>
</Col>
</Row>
</>
)
}
export default Splash;

Just an advice, your question isn't really well formulated so it's hard to understand what are you trying to accomplish. Try to keep the questions clear and remove any redundant code so the community can better understand it.
If I'm assuming correctly that you don't want to use splash[index] then you should change splash[index].title to title, same for the other props.
Since you already destructured the splash object with const { id, title, description, background } = splash; all these will be available.
Another thing here is, .map method returns the item in the array so I don't see the point in you using the index inside the loop to access the item from the array.

how to make a vertical slide of text in React

I am trying to make a vertical text slide. Having not found help in reactjs, I try to do it myself and I'm pretty happy with the result but a slight bug appears at the end of each word slide.
I imagine that there are several ways to create this animation but it is the only one that comes to me with my knowledge in JS.
Here my code:
import React, { useEffect, useRef, useState } from 'react'
const Version1 = () => {
const [ words, setWords ] = useState(['Victor', 'Alex', 'Lucie'])
const wrapperRef = useRef()
const handleAnim = () => {
setTimeout(() => {
const copyWords = [ ...words ];
const firstElem = copyWords.splice(1)
wrapperRef.current.style.transition = 'none';
wrapperRef.current.style.top = '0px'
setWords([ ...firstElem.concat(copyWords) ])
},1000);
wrapperRef.current.style.transition = '0.5s';
wrapperRef.current.style.top = '-70px'
}
useEffect(() => {
setTimeout(() => {
handleAnim()
}, 2000);
})
return (
<>
<div className="test-container">
<div className='test-title'>Hello</div>
<div className='text-container-word'>
<div ref={wrapperRef} className='text-container-word-wrapper'>
<span className='text-word'>{words[0]}</span>
<span className='text-word'>{words[1]}</span>
</div>
</div>
</div>
<style jsx>
{`
.test-container {
padding: 100px 0;
width: 100%;
display: flex;
}
.test-title {
font-size: 48px;
font-weight: bold;
color: blue;
}
.text-container-word {
position: relative;
width: 200px;
height: 70px;
background-color: green;
display: inline-block;
overflow: hidden;
margin-top: -7px;
}
.text-container-word-wrapper {
height: auto;
position: relative;
top: 0px;
}
.test-container h1 {
position: relative;
display: inline;
padding: 10px;
}
.text-word {
height: 70px;
font-size: 48px;
font-weight: bold;
display: block;
transition: 0.5s;
line-height: 70px;
}
`}
</style>
</>
)
}
export default Version1

Here is a pure css based solution that uses words from state without the useEffect hacks.
const {useState} = React;
function App() {
const [words, setWords] = useState(["Victor", "Alex", "Lucie", "Michael"]);
return (
<div className="App">
<div className="scroller">
<span>
{words[0]}
<br />
{words[1]}
<br />
{words[2]}
<br />
{words[3]}
</span>
</div>
</div>
);
}
ReactDOM.render(
<App/>,
document.getElementById("react")
);
.App {
font-family: sans-serif;
text-align: center;
}
.scroller {
height: 1.2em;
line-height: 1.2em;
position: relative;
overflow: hidden;
font-size: 40px;
text-align: center;
}
.scroller > span {
position: absolute;
top: 0;
animation: slide 6s infinite;
font-weight: bold;
background-color: green;
}
#keyframes slide {
0% {
top: 0;
}
25% {
top: -1.2em;
}
50% {
top: -2.4em;
}
75% {
top: -3.6em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react">

set height and width with overflow-f:scroll
overflow-y: scroll;
you can also see this: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_overflow-y

Open and close mobile navbar menu using styled components

I'm following a guide on how to build a simple website using Styled Components.
When the website is in mobile view the hamburger menu is stuck open and will not close when clicking the hamburger symbol or any of the nav menu items. The hamburger symbol does toggle to the FaTimes symbol, however.
All solutions I found so far don't work or require bootstrap, which I'm unfamiliar with. Can someone please explain to me the error in my code?
Navbar
import React, {useState, useEffect} from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';
import { Nav, NavbarContainer, NavLogo, NavIcon, MobileIcon, NavItem, NavMenu, NavLinks,
NavItemBtn, NavBtnLink } from './Navbar.elements';
import {Button } from '../globalstyles';
import osun from '../images/Osun.png';
import { IconContext} from 'react-icons/lib';
import Home from './pages/Home';
const Navbar = () => {
const [click, setClick, isOpen, setIsOpen] = useState(false);
const [button, setButton] = useState(true);
const toggle = () => setIsOpen(!isOpen);
const hide = () => setIsOpen(false);
const handleClick = () => setClick(!click);
// const toggleShow = () => {
// this.setState({show: !this.state.show})
// }
//const toggleShow = () => setClick(!show)
// const toggleShow = () => {
// if (window.innerwidth <= 960){
// showMenu(false)
// } else {
// showMenu(true)
// }
// }
const showButton = () => {
if (window.innerWidth <=960){
setButton(false)
} else {
setButton(true)
}
};
const closeMobileMenu = () => setClick(false);
useEffect(() => {
showButton();
//toggleShow()
}, []);
window.addEventListener('resize', showButton);
//window.addEventListener('resize', toggleShow);
return (
<>
<IconContext.Provider value={{color: "#fff"}}>
<Nav>
<NavbarContainer>
<NavLogo to ="/">
<NavIcon />
Osun Swap
</NavLogo>
<MobileIcon onClick={handleClick} onBlur={hide} >
{click ? < FaTimes/> : <FaBars/>}
</MobileIcon>
<NavMenu onClick={handleClick} click ={click}>
<NavItem>
<NavLinks to = '/' onClick={closeMobileMenu}>
Home
</NavLinks>
</NavItem>
<NavItem>
<NavLinks to = '/services' onClick={closeMobileMenu}>
Services
</NavLinks>
</NavItem>
<NavItem>
<NavLinks to = '/AboutUs' onClick={closeMobileMenu}>
About us
</NavLinks>
</NavItem>
<NavItemBtn>
{button ? (
<NavBtnLink to ='/sign-up'>
<Button primary> Connect Wallet </Button>
</NavBtnLink>
) : (
<NavBtnLink to='/sign-up'>
<Button onClick={closeMobileMenu} fontBig primary>
Connect Wallet
</Button>
</NavBtnLink>
)}
</NavItemBtn>
</NavMenu>
</NavbarContainer>
</Nav>
</IconContext.Provider>
</>
)
}
export default Navbar;
Navbar.elements
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import osun from '../images/Osun.png';
import { Container } from '../globalstyles';
export const Nav = styled.nav`
background : #101522;//#282c34;//rgb(35, 31,32);//; //rgb(10, 10, 10);
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
position: sticky;
top:0;
z-index:999;
`;
export const NavbarContainer = styled(Container)`
display: flex;
justify-content:space-between;
height: 80px;
${Container}
`;
export const NavLogo = styled(Link)`
color: #ffff;
justify-self: flex-start;
cursor: pointer;
font-size: 2rem;
display: flex;
align-items: center;
`;
export const NavIcon = styled.div`
background-image: url(${osun});
margin-right: 0.5rem;
`;
export const MobileIcon = styled.div`
display: none;
#media screen and (max-width: 960px){
display:block;
position: absolute;
top: 0;
right:0 ;
transform: translate(-100%, 60%);
font-size: 1.8rem;
cursor: pointer;
}
`;
export const NavMenu = styled.ul`
display: flex;
align-items: center;
list-style: none;
//text-decoration: none;
text-align: center;
/* display: flex;
flex-direction: column;
width: 100px;
height: 500px;
top: 80px;
left: -100%;
opacity:1;
transition: all 0.5s ease; */
#media screen and (max-width: 960px) {
display: flex;
flex-direction: column;
width: 100%;
//list-style: none;
height: 90vh;
top: 80px;
//right: -100%;
right: ${({click}) => (click ? 0 : '-100%')};
opacity:1;
//transform: ${({open}) => open ? 'translateX(0)' : 'translateX(100%)'};
transition: all 0.5s ease;
background: #101522; //rgb(35, 31,32);//
}
`;
export const NavItem = styled.li`
height: 80px;
border-bottom: 2px solid transparent;
#media screen and (max-width: 960px){
//visibility: hidden;
// display: block;
position: relative;
width: 100%;
//top:0;
//right:0;
//transform: translate(-100%, 60%);
//font-size:1.8rem;
//cursor: pointer;
}
&:hover {
border-bottom: 2px solid #4b59f7;
}
`;
export const NavLinks = styled(Link)`
color: #fff;
display:flex;
align-items: center;
text-decoration: none;
padding:0.5rem 1rem;
height: 100%;
#media screen and (max-width: 960px){
text-align: center;
padding: 2rem;
width: 100%;
display: table;
&:hover {
color:#4b59f7;
transition: all 0.3s ease;
}
}
`;
export const NavItemBtn = styled.li`
#media screen and (max-width: 960){
display:flex;
justify-content: center;
align-items: center;
width: 100%;
height: 120px
}
`;
export const NavBtnLink= styled(Link)`
display: flex;
justify-content:center;
align-items: center;
text-decoration: none;
padding: 8px 16px;
height: 100%;
width: 100%;
border: none;
outline: none;
`;

I tried to reproduce your issue and ran into errors with your code example, which may be the cause of your issue. In particular:
const [click, setClick, isOpen, setIsOpen] = useState(false);
is not a valid setup for useState. Try splitting this into two separate useState calls like:
const [click, setClick] = useState(false);
const [isOpen, setIsOpen] = useState(false);
As you had it in the original example, my IDE immediately flagged that line, and also informed me that isOpen was not initialized to anything, which threw major errors when I tried to click the button / blur it.

Centering active element inside custom React carousel

I have a simple custom React carousel:
https://codesandbox.io/s/infallible-wood-740s2?fontsize=14
It goes through numbers from 1 to 100. I'm trying to have an active number centered with large font size, and its neighbors with smaller font size:
To progress through this carousel, you have to click on the carousel.
The issue is that progressing through the carousel numbers starts to misalign. I suppose that it is because of the wrong calculation for left property.
I've tried to tweak the formula, use React Transition Group, and find some existing package which could solve this issue, but I haven't succeeded. I would appreciate any help.
Component code:
import React, { Component } from "react";
import ReactDOM from "react-dom";
import {
Wrapper,
NumbersWrapper,
NumbersScroller,
NumberText
} from "./Numbers.style";
const hundred = new Array(100)
.fill(0)
.map((k, v) => ({ key: v, label: v + 1 }));
class Numbers extends Component {
constructor(props) {
super(props);
this.state = {
activeNumber: 0
};
}
setActiveNumber(number) {
this.setState({
activeNumber: number
});
}
render() {
const { activeNumber } = this.state;
const intAciveNumber = Number(activeNumber);
return (
<Wrapper>
<NumbersWrapper
onClick={() => this.setActiveNumber(intAciveNumber + 1)}
>
<NumbersScroller
style={{
left: `${130 - intAciveNumber * 55}px`
}}
>
{hundred.map(({ key, label }) => {
const isNeighbor =
key + 1 === activeNumber || key - 1 === activeNumber;
const isActive = key === activeNumber;
return (
<NumberText
key={key}
isNeighbor={isNeighbor}
isActive={isActive}
>
{label}
</NumberText>
);
})}
</NumbersScroller>
</NumbersWrapper>
</Wrapper>
);
}
}
export default Numbers;
const rootElement = document.getElementById("root");
ReactDOM.render(<Numbers />, rootElement);
Numbers.style.js:
import styled from "styled-components";
export const Wrapper = styled.div`
height: 549px;
width: 612px;
border-radius: 28px;
background-color: #ffffff;
margin-top: 116px;
padding: 26px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
left: 50%;
top: 0%;
transform: translate(-50%, -10%);
overflow: hidden;
`;
export const NumbersWrapper = styled.div`
white-space: nowrap;
width: 359.5px;
overflow: hidden;
`;
export const NumbersScroller = styled.div`
transition: all 150ms ease-in;
position: relative;
left: 130px;
`;
const numberTextStyle = props => {
if (props.isNeighbor) {
return `
height: 88px;
width: 53px;
opacity: 0.45;
color: #6C879C;
font-size: 80px;
font-weight: 300;
letter-spacing: -1.6px;
line-height: 88px;
text-align: center;
`;
}
if (props.isActive) {
return `
height: 156px;
color: #6C879C;
font-size: 150px;
font-weight: 300;
letter-spacing: -3px;
line-height: 156px;
text-align: center;
`;
}
return `
opacity: 0.2;
color: #6C879C;
font-size: 40px;
font-weight: 300;
letter-spacing: -0.8px;
line-height: 48px;
text-align: center;
`;
};
export const NumberText = styled.span`
font-family: Avenir;
margin: 0 15px;
user-select: none;
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
${props => numberTextStyle(props)}
`;