After borrowing some basic HTML, CSS, and JavaScript code from CodePen, I ran into an issue while attempting to convert it to React. The error message says that it cannot read properties of null (specifically 'dataset').
Here is the JavaScript code snippet:
const wrapper = document.getElementById("wrapper");
const rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
const uniqueRand = (min, max, prev) => {
let next = prev;
while(prev === next) next = rand(min, max);
return next;
}
const combinations = [
{ configuration: 1, roundness: 1 },
{ configuration: 1, roundness: 2 },
{ configuration: 1, roundness: 4 },
{ configuration: 2, roundness: 2 },
{ configuration: 2, roundness: 3 },
{ configuration: 3, roundness: 3 }
];
let prev = 0;
setInterval(() => {
const index = uniqueRand(0, combinations.length - 1, prev),
combination = combinations[index];
wrapper.dataset.configuration = combination.configuration;
wrapper.dataset.roundness = combination.roundness;
prev = index;
}, 1000);
And here's the corresponding HTML code:
<div id="wrapper" ref={myContainer} data-configuration="1" data-roundness="1">
<div className="shape"></div>
<div className="shape"></div>
<div className="shape"></div>
<div className="shape"></div>
<div className="shape"></div>
<div className="shape"></div>
<div className="shape"></div>
</div>
Uploading the associated CSS would be too lengthy...
I attempted using useRef, but didn't have any luck. Time to find a workaround for this roadblock.
Uncaught TypeError: Cannot read properties of null (reading 'dataset')