What are the best alternatives for javascript clientWidth in reactjs? - reactjs

Question

I am trying to convert JavaScript code to ReactJS.
The compiler doesn't display any error but browser is throwing an error at runtime.
I expect to see it workable but I am getting some errors.
My slider is not displaying the images even when I click on left or right arrows then browser takes me for debugging when i comment these two lines
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (size * counter) + 'px)'
-----------------------------------Carousel.css--------------------------
* {
padding:0px;
margin:0px;
box-sizing:border-box;
}
.carousel-container
{
width:60%;
margin:auto;
border: 5px solid black;
overflow:hidden;
position: relative;
}
.carousel-slide{
display: flex;
width:100%;
height:500px;
}
#prevBtn{
position:absolute;
top: 50%;
z-index:10;
left:5%;
font-size:30px;
color:grey;
opacity: 0.9;
cursor:pointer;
}
#nextBtn{
position:absolute;
top: 50%;
z-index:10;
right:5%;
font-size:30px;
color:grey;
opacity: 0.9;
cursor:pointer;
}
-----------------------------------Carousel.js--------------------------
import React from "react";
import './Carousel.css'
const Carousel = () => {
const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');
let counter = 1;
const size = carouselImages[0].clientWidth;
carouselSlide.style.transform = 'translateX(' + (size * counter) + 'px)'
function showNextItemFlex() {
debugger;
if(counter >= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter ++;
// console.log(counter);
carouselSlide.style.transform = 'translateX('+ (size * counter) + 'px)';
}
function showPreviousItemFlex() {
debugger;
if(counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
// console.log(counter);
carouselSlide.style.transform = 'translateX('+ (size * counter) + 'px)';
}
function fireTransitioned()
{
debugger;
if(carouselImages[counter].id === 'lastClone')
{
carouselSlide.style.transition = "none";
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX('+ (size * counter) + 'px)';
}
if(carouselImages[counter].id === 'firstClone')
{
carouselSlide.style.transition = "none";
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX('+ (size * counter) + 'px)';
}
}
return (
<div className="carousel-container">
{/* <i id="prevBtn" onClick={showPreviousItem}>❮</i>
<i id="nextBtn" onClick={showNextItem}>❯</i> */}
<i id="prevBtn" onClick={showPreviousItemFlex}>❮</i>
<i id="nextBtn" onClick={showNextItemFlex}>❯</i>
<div className="carousel-slide" onTransitionEnd={fireTransitioned}>
<img id="lastClone" src="https://source.unsplash.com/InR-EhiO_js" alt="None"/>
<img src="https://source.unsplash.com/gKk9rpyDryU" alt="None " />
<img src="https://source.unsplash.com/VFGEhLznjPU" alt="None"/>
<img src="https://source.unsplash.com/InR-EhiO_js" alt="None"/>
<img id="firstClone" src="https://source.unsplash.com/gKk9rpyDryU" alt="None " />
</div>
</div>
);
}
export default Carousel;
Application built with
{
"react": "16.13.0",
"react-dom": "^16.13.0",
"react-redux": "^7.2.0",
"redux": "^4.0.4"
"#material-ui/core": "^4.9.5"
}
Now see the errors below:
TypeError: Cannot read property 'clientWidth' of undefined
CarouselFlex
H:/ReactJs/Source Codes/react-master/react-master/src/components/Sliders/Carousel.js:9
6 | const carouselSlide = document.querySelector('.carousel-slide');
7 | const carouselImages = document.querySelectorAll('.carousel-slide img');
8 | let counter = 1;
> 9 | const size = carouselImages[0].clientWidth;
10 | carouselSlide.style.transform = 'translateX(' + (size * counter) + 'px)'
11 |
12 | // // Similar to componentDidMount and componentDidUpdate:
View compiled
renderWithHooks
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:14803
14800 | }
14801 | }
14802 |
> 14803 | var children = Component(props, secondArg); // Check if there was a render phase update
| ^ 14804 |
14805 | if (workInProgress.expirationTime === renderExpirationTime) {
14806 | // Keep rendering in a loop for as long as render phase updates continue to
View compiled
mountIndeterminateComponent
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:17482
17479 |
17480 | setIsRendering(true);
17481 | ReactCurrentOwner$1.current = workInProgress;
> 17482 | value = renderWithHooks(null, workInProgress, Component, props, context, renderExpirationTime);
| ^ 17483 | setIsRendering(false);
17484 | } // React DevTools reads this flag.
17485 |
View compiled
beginWork
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:18596
18593 | switch (workInProgress.tag) {
18594 | case IndeterminateComponent:
18595 | {
> 18596 | return mountIndeterminateComponent(current, workInProgress, workInProgress.type, renderExpirationTime);
| ^ 18597 | }
18598 |
18599 | case LazyComponent:
View compiled
HTMLUnknownElement.callCallback
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:188
185 | window.event = windowEvent;
186 | }
187 |
> 188 | func.apply(context, funcArgs);
| ^ 189 | didError = false;
190 | } // Create a global error event handler. We use this to capture the value
191 | // that was thrown. It's possible that this error handler will fire more
View compiled
invokeGuardedCallbackDev
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:237
234 | // errors, it will trigger our global error handler.
235 |
236 | evt.initEvent(evtType, false, false);
> 237 | fakeNode.dispatchEvent(evt);
| ^ 238 |
239 | if (windowEventDescriptor) {
240 | Object.defineProperty(window, 'event', windowEventDescriptor);
View compiled
invokeGuardedCallback
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:292
289 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
290 | hasError = false;
291 | caughtError = null;
> 292 | invokeGuardedCallbackImpl$1.apply(reporter, arguments);
293 | }
294 | /**
295 | * Same as invokeGuardedCallback, but instead of returning an error, it stores
View compiled
beginWork$1
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:23203
23200 | } // Run beginWork again.
23201 |
23202 |
> 23203 | invokeGuardedCallback(null, beginWork, null, current, unitOfWork, expirationTime);
| ^ 23204 |
23205 | if (hasCaughtError()) {
23206 | var replayError = clearCaughtError(); // `invokeGuardedCallback` sometimes sets an expando `_suppressLogging`.
View compiled
performUnitOfWork
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:22154
22151 |
22152 | if ( (unitOfWork.mode & ProfileMode) !== NoMode) {
22153 | startProfilerTimer(unitOfWork);
> 22154 | next = beginWork$1(current, unitOfWork, renderExpirationTime$1);
| ^ 22155 | stopProfilerTimerIfRunningAndRecordDelta(unitOfWork, true);
22156 | } else {
22157 | next = beginWork$1(current, unitOfWork, renderExpirationTime$1);
View compiled
workLoopSync
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:22130
22127 | function workLoopSync() {
22128 | // Already timed out, so perform work without checking if we need to yield.
22129 | while (workInProgress !== null) {
> 22130 | workInProgress = performUnitOfWork(workInProgress);
22131 | }
22132 | }
22133 | /** #noinline */
View compiled
performSyncWorkOnRoot
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:21756
21753 |
21754 | do {
21755 | try {
> 21756 | workLoopSync();
| ^ 21757 | break;
21758 | } catch (thrownValue) {
21759 | handleError(root, thrownValue);
View compiled
scheduleUpdateOnFiber
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:21188
21185 | // root inside of batchedUpdates should be synchronous, but layout updates
21186 | // should be deferred until the end of the batch.
21187 |
> 21188 | performSyncWorkOnRoot(root);
| ^ 21189 | } else {
21190 | ensureRootIsScheduled(root);
21191 | schedulePendingInteractions(root, expirationTime);
View compiled
updateContainer
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:24373
24370 | }
24371 |
24372 | enqueueUpdate(current$1, update);
> 24373 | scheduleWork(current$1, expirationTime);
24374 | return expirationTime;
24375 | }
24376 | function getPublicRootInstance(container) {
View compiled
(anonymous function)
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:24758
24755 |
24756 |
24757 | unbatchedUpdates(function () {
> 24758 | updateContainer(children, fiberRoot, parentComponent, callback);
| ^ 24759 | });
24760 | } else {
24761 | fiberRoot = root._internalRoot;
View compiled
unbatchedUpdates
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:21903
21900 | executionContext |= LegacyUnbatchedContext;
21901 |
21902 | try {
> 21903 | return fn(a);
| ^ 21904 | } finally {
21905 | executionContext = prevExecutionContext;
21906 |
View compiled
legacyRenderSubtreeIntoContainer
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:24757
24754 | } // Initial mount should not be batched.
24755 |
24756 |
> 24757 | unbatchedUpdates(function () {
| ^ 24758 | updateContainer(children, fiberRoot, parentComponent, callback);
24759 | });
24760 | } else {
View compiled
render
H:/ReactJs/Source Codes/react-master/react-master/node_modules/react-dom/cjs/react-dom.development.js:24840
24837 | }
24838 | }
24839 |
> 24840 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback);
24841 | }
24842 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
24843 | if (!isValidContainer(containerNode)) {
View compiled
Module../src/index.js
H:/ReactJs/Source Codes/react-master/react-master/src/index.js:9
6 | import reducer, { initialState } from "./reducer";
7 | import { StateProvider } from "./StateProvider";
8 |
> 9 | ReactDOM.render(
10 | <React.StrictMode>
11 | <StateProvider initialState={initialState} reducer={reducer}>
12 | <App />
View compiled
__webpack_require__
H:/ReactJs/Source Codes/react-master/react-master/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
fn
H:/ReactJs/Source Codes/react-master/react-master/webpack/bootstrap:150
147 | );
148 | hotCurrentParents = [];
149 | }
> 150 | return __webpack_require__(request);
| ^ 151 | };
152 | var ObjectFactory = function ObjectFactory(name) {
153 | return {
View compiled
1
http://localhost:3000/static/js/main.chunk.js:3421:18
__webpack_require__
H:/ReactJs/Source Codes/react-master/react-master/webpack/bootstrap:784
781 | };
782 |
783 | // Execute the module function
> 784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 785 |
786 | // Flag the module as loaded
787 | module.l = true;
View compiled
checkDeferredModules
H:/ReactJs/Source Codes/react-master/react-master/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 |
View compiled
Array.webpackJsonpCallback [as push]
H:/ReactJs/Source Codes/react-master/react-master/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
> 32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
(anonymous function)

Answer 1

I changed your code to React style It works now, but it has some bugs yet:
when your click in transition time
when you change direction.
It's good point to start your work.
.carousel-slide{
display: flex;
width:100%; // - also I removed it
height:500px;
}
component:
import React, { useState, useRef, useEffect } from "react";
import "./Carousel.css";
const Carousel = () => {
const [counter, setCounter] = useState(0);
const [isNextClick, setIsNextClick] = useState(false);
const [size, setSize] = useState(1);
const [carouselImages, setCarouselImages] = useState(null);
const carouselSlideRef = useRef();
useEffect(() => {
const images = document.querySelectorAll("img");
const size_ = images[0].clientWidth;
setCarouselImages(images);
setSize(size_);
}, [counter, size]);
function showNextItemFlex() {
carouselSlideRef.current.style.transition = "transform 0.4s ease-in-out";
const counter_ = counter < carouselImages.length - 1 ? counter + 1 : 0;
setCounter(counter_);
setIsNextClick(true);
carouselSlideRef.current.style.transform = `translateX(${
-size * counter_
}px)`;
}
function showPreviousItemFlex() {
carouselSlideRef.current.style.transition = "transform 0.4s ease-in-out";
const counter_ = counter <= 0 ? carouselImages.length - 1 : counter - 1;
setCounter(counter_);
setIsNextClick(false);
carouselSlideRef.current.style.transform = `translateX(${
-size * counter_
}px)`;
}
function fireTransitioned() {
if (carouselImages[counter].id === "lastClone" && !isNextClick) {
carouselSlideRef.current.style.transition = "none";
const counter_ = carouselImages.length - 1;
setCounter(counter_);
carouselSlideRef.current.style.transform =
"translateX(" + -size * counter_ + "px)";
}
if (carouselImages[counter].id === "firstClone" && isNextClick) {
carouselSlideRef.current.style.transition = "none";
const counter_ = 0;
setCounter(counter_);
carouselSlideRef.current.style.transform =
"translateX(" + -size * counter_ + "px)";
}
}
return (
<>
<p>{counter}</p>
<div className="carousel-container">
{/* <i id="prevBtn" onClick={showPreviousItem}>❮</i>
<i id="nextBtn" onClick={showNextItem}>❯</i> */}
<i id="prevBtn" onClick={showPreviousItemFlex}>
❮
</i>
<i id="nextBtn" onClick={showNextItemFlex}>
❯
</i>
<div
ref={carouselSlideRef}
className="carousel-slide"
onTransitionEnd={fireTransitioned}
>
<img
id="lastClone"
src="https://source.unsplash.com/InR-EhiO_js"
alt="None"
/>
<img src="https://source.unsplash.com/gKk9rpyDryU" alt="None " />
<img src="https://source.unsplash.com/VFGEhLznjPU" alt="None" />
<img
id="firstClone"
src="https://source.unsplash.com/InR-EhiO_js"
alt="None"
/>
</div>
</div>
</>
);
};
export default Carousel;