I am creating a website with GatsbyJS and React and I am trying to make changes to the DOM. At first I tried to do it with JS, but after research, I found ReactDOM.
I tried it in JS, it worked at first and then it gives me an error:
(function() {
const today= new Date();
const hours = today.getHours();
const minute = today.getMinutes()
const element = document.getElementById('pintar');
if (hours >= 0 && hours < 9) {
element.innerText = 'sleeping'
}else{
element.innerText = 'Doing something else'
}
})()
What I want to do is "write" in the DOM a text, according to a condition (if statement), which is related by the current time.
When I first tried everything worked out, but when I changed the condition, and this is met, the following error appears: Target container is not a DOM element
I'm starting with React, and I'm not able to make changes to the DOM.
I copy my code to see what I must do to be able to make those changes in the DOM:
import React from "react"
import { Link } from "gatsby"
import ReactDOM from 'react-dom'
import Layout from '../components/layout'
import '../styles/index.scss'
import headerStyles from '../styles/header.module.scss'
import aboutStyles from '../styles/about.module.scss'
import { IoIosArrowRoundDown } from "react-icons/io";
import Clock from 'react-digital-clock';
const today= new Date();
const hours = today.getHours();
//const minute = today.getMinutes()
const pintar = document.getElementById('pintar');
const a = 'sleeping'
const b = 'Doing something else'
if (hours >= 0 && hours < 9) {
ReactDOM.render(a, pintar)
}else{
ReactDOM.render(b, pintar)
}
const About = () => {
return(
<Layout>
<section className={headerStyles.header_wrapper}>
<h3 className={headerStyles.header_wrapper_title}>About me</h3>
<h1 className={headerStyles.header_wrapper_main}>Hey there
</h1>
</section>
<IoIosArrowRoundDown className={headerStyles.header_arrow} />
<p id='pintar'></p>
<Clock className={aboutStyles.clock} hour12={false} format={'hh-mm'} />
</Layout>
)
}
export default About
Normally, when using ReactDom.render you will be rendering something that is outside of react structure, but in your case, you are trying to render something that is inside the react structure and you shouldn't do that.
If you want to render the text inside <p id='pintar'></p> what you should do is
const About = () => {
let pintar = ''
// you can add any logic here and change pintar
if (hours >= 0 && hours < 9) {
pintar = 'something'
} else {
pintar = 'otherthing'
}
return(
<Layout>
<section className={headerStyles.header_wrapper}>
<h3 className={headerStyles.header_wrapper_title}>About me</h3>
<h1 className={headerStyles.header_wrapper_main}>Hey there
</h1>
</section>
<IoIosArrowRoundDown className={headerStyles.header_arrow} />
// rendering pintar
<p id='pintar'>{pintar}</p>
<Clock className={aboutStyles.clock} hour12={false} format={'hh-mm'} />
</Layout>
)
}
Related
import { useState } from 'react'
import styles from '../styles/Login.module.css'
import {motion as m} from 'framer-motion'
const words = ['Sheetal','Jackie','Rohan','Narayan','Budwiser']
export default function Login() {
const [step,setStep] = useState(0)
const initial = {
transform:'translateX(100%)'
}
const animate = {
transform:'translateX(0)'
}
return (<main>
<div className={styles.carousel_parent}>
<div className={styles.track}>
{
<m.div initial={initial} animate={animate} className={styles.slides}><div>{words[step]}</div></m.div>
}
</div>
<div className={styles.controls}>
<button
disabled={step<1?true:false}
onClick={()=>{
const total = words.length;
if(step - 1 < 0){
return false
}else{
setStep(step-1)
}
}}>Prev</button>
<div className={styles.dots}>
</div>
<button
disabled={step+1>words.length-1?true:false}
onClick={()=>{
const total = words.length;
if(step + 1 > words.length-1){
return false
}else{
setStep(step+1)
}
}}>Next</button>
</div>
</div>
</main>)
}
The above is my code. What I want to acheive is when someone clicks on the next button, the slide should change with transition. I have acheived everything however the transition effect using framer motion is not working.
**What have I tried using : **
I have tried prefixing 'm.' in litrally every component but nothings seems to work.
I'm building a web app with React that generates random movie quotes...
The problem arises when the quote is too long and it overflows outside the parent div...
I've tried altering the css with display flex and flex-wrap set to wrap. It does't work.
Here is my code.
import React from 'react';
import Typed from 'typed.js';
import './App.css';
import quotes from './quotes.json';
const random_quote = () => {
const rand = Math.floor(Math.random() * quotes.length);
let selected_quote = quotes[rand].quote + ' - ' + quotes[rand].movie;
return selected_quote;
}
const TypedQuote = () => {
// Create reference to store the DOM element containing the animation
const el = React.useRef(null);
// Create reference to store the Typed instance itself
const typed = React.useRef(null);
React.useEffect(() => {
const options = {
strings: [
random_quote(),
],
typeSpeed: 30,
backSpeed: 50,
};
// elRef refers to the <span> rendered below
typed.current = new Typed(el.current, options);
return () => {
// Make sure to destroy Typed instance during cleanup
// to prevent memory leaks
typed.current.destroy();
}
}, [])
return (
<div className="type-wrap">
<span style={{ whiteSpace: 'pre' }} ref={el} />
</div>
);
}
const App = () => {
return (
<>
<div className='background' id='background'>
<div className='quote-box'>
<TypedQuote />
</div>
<button onClick={random_quote}>New Quote</button>
</div>
</>
);
}
export default App;
I have this idea where I could implement a function that adds '\n' after like 10 words or like maybe after a '.' or ',' (I could implement some logic here). But this seems like a longshot. Is there a fancier way to do this?? Any help would be appreciated.
Try the property below on the parent container.
word-wrap: break-word;
or the below if you want to break words as well
word-break: break-all;
Hey guys I'm trying to remove the border of the last item in an unordered list when the list grows to a certain size. My initial thought was something like:
document.querySelector('.employee-list-item:last-child').style.border = "none";
However, React says it can't set the style property on 'null.' Is it trying to target the element before it's been rendered? Any workarounds for this?
Here's my code:
import "../css/Employee.css";
import Avatar from "./Avatar";
import React from "react";
const Employee = (props) => {
// capitalize first letter of firstName and first letter of lastName
const name = props.name
.split(" ")
.map((i) => i[0].toUpperCase() + i.slice(1))
.join(" ");
const { title } = props;
return (
<li className="employee-list-item">
<Avatar name={props.name} />
<span className={"employee-name"}>{name}</span>
<span className={"employee-title"}>{title}</span>
</li>
);
};
export default Employee;
Create a new file called "App.css" and insert some CSS code in it:
OR
You can add CSS - Employee.css
.employee-list-item:last-child{border:none !important;}
Import the stylesheet in your application:
import './App.css';
You should put the code into a useEffect hook - that ensures it will run after React has done all its magic and the Virtual DOM has been rendered to the live DOM. The the code you already thought of should work with a tweak:
useEffect(() => {
document.querySelector('.employee-list-item:last-child')[0].style.border = "none"; // or forEach(... if you expect more than one item to match
});
One way is pass a prop (ex isLast) to Employee and style based on that.
const Employee = (props) => {
return (
<li
className="employee-list-item"
style={props.isLast ? { border: "none" } : undefined}
></li>
);
};
const List = () => {
return (
<div>
{employees.map((emp, index) => (
<Employee isLast={index === employees.length - 1} />
))}
</div>
);
};
I've built a grid of images coming from an API, and now I am trying to build a slider.
First image to be displayed should be the one clicked in the Grid below the slider , and when clicked next/prev go to the nex/prev img in the array.
How could I get it?
I am trying by setting the initial state of ``ìmgToShow```to the img clicked, but i get nothing in console. The idea would be to get that, and then , i still dont know how, update the state to show the next img in the Array.
album is the array of objects with all the images. Fetched in my Context component
clickedImagecontains the clicked image's URL. I get it from a click event in other component.
This is my component :
import React, { useContext, useState } from "react";
import { AlbumContext } from "../../context/AlbumContext";
import "./carousel.css";
import BtnSlider from "./BtnSlider";
function Carousel() {
const { clickedImage, albums } = useContext(AlbumContext);
const [imgToShow, setImgToShow] = useState(clickedImage);
console.log("imgTOSHOW", imgToShow); // empty in console
console.log("clickedIMG in context", clickedImage); // gives me the URL clicked
const [slideIndex, setSlideIndex] = useState(1);
const nextSlide = () => {
if (slideIndex !== albums.length) {
setSlideIndex(slideIndex + 1);
} else if (slideIndex === albums.length) {
setSlideIndex(1);
}
};
const prevSlide = () => {};
return (
<div className="container-slider">
{albums &&
albums.map((item, index) => {
return (
<div
key={item.id}
className={
slideIndex === index + 1 ? "slide active-anim" : "slide"
}
>
<img src={imgToShow} alt="" />
</div>
);
})}
<BtnSlider moveSlide={nextSlide} direction={"next"} />
<BtnSlider moveSlide={prevSlide} direction={"prev"} />
</div>
);
}
export default Carousel
I'm building a portfolio app in React JS and one of my pages is an About Me page. I stumbled upon a youtube video that builds an infinite carousel using vanilla JavaScript, and during my initial testing it worked. However, when I navigate away from my 'About Me' page and return, it explodes with a "TypeError: Cannot read property 'style' of null" within my About Me component "stepNext; src/components/about-me/AboutMe.js:34".
import React from "react";
import "./AboutMe.css"
import { Button,
Fade,
Grow,
Typography } from '#material-ui/core'
import { ArrowBackIos, ArrowForwardIos } from "#material-ui/icons";
import { Background, Adventures, Hobbies } from "./about-me-components/index";
export const AboutMe = () => {
const slider = document.querySelector('.slider-about-me')
const carousel = document.querySelector('.carousel-about-me')
let direction = 1
const stepPrevious = () => {
if (direction === 1) {
slider.appendChild(slider.firstElementChild)
}
direction = -1
console.log("Previous", direction)
carousel.style.justifyContent = 'flex-end'
slider.style.transform = 'translate(33%)'
}
const stepNext = () => {
if (direction === -1) {
slider.prepend(slider.lastElementChild)
}
direction = 1
console.log("Next", direction)
carousel.style.justifyContent = 'flex-start'
slider.style.transform = 'translate(-33%)'
}
const sliderAppend = () => {
if (direction === 1) {
slider.appendChild(slider.firstElementChild)
} else if (direction === -1) {
slider.prepend(slider.lastElementChild)
}
slider.style.transition = 'none'
slider.style.transform = 'translate(0)'
setTimeout(() => {slider.style.transition = 'all 0.5s'})
}
return (
<>
<Fade
in={true}
timeout={1500}
>
<div
id='about-me-container'
>
<div className="controls">
<div
className='arrow-span-about-me arrow-left-about-me'
>
<Button
className='button-about-me arrow-about-me'
variant='contained'
onClick={stepPrevious}
>
<ArrowBackIos
className="arrow-back-about-me"
/>
</Button>
</div>
<div
className='arrow-span-about-me arrow-right-about-me'
>
<Button
className='button-about-me arrow-about-me'
variant='contained'
onClick={stepNext}
>
<ArrowForwardIos
className="arrow-forward-about-me"
/>
</Button>
</div>
</div>
<div
id="about-me-carousel-container"
>
<div
className='carousel-about-me'
>
<div
className='slider-about-me'
onTransitionEnd={sliderAppend}
>
<section className='text-white'><Background /></section>
<section className='text-white'><Adventures /></section>
<section className='text-white'><Hobbies /></section>
</div>
</div>
</div>
</div>
</Fade>
</>
)
}
The only reason I chose this route is because I haven't been able to find a half decent infinite carousel module with easy customization abilities. As much as I would prefer for this to work, I'm open to suggestions and/or solutions. Much appreciated!
I would suggest using useRef instead of document.querySelector
document.querySelector happens outside of that lifecycle, making what it returns unreliable, while refs happen within it. (Though doesn’t get reset because of a lifecycle event like a re-render.) This ensures the object returned by the ref is an accurate representation of the current state of the virtual DOM.
I think this is the reason why you are encountering the said error when you go away and back from the About Page.
Here's an example:
https://codesandbox.io/s/objective-fast-vhc27?file=/src/modalAndButton.jsx:531-648