Undefined element of style in reactjs
I am building a small sorting visualiser and I am getting this error even though every style property is defined . My app.js code is here The error is show at the numbers 1 and 2 (I mentioned 1 and 2 in the comments of code .
mergeSort(){ const animations=mergeSortAnimations(this.state.array); for(let i=0;i<animations.length;i++){ //take all the array bars const arrayBars=document.getElementsByClassName("array-bar"); const isColorChange = i % 3 !== 2; if(isColorChange){ const [barOneIdx,barTwoIdx]=animations[i]; const barOneStyle=arrayBars[barOneIdx].style; // 1 const barTwoStyle =arrayBars[barTwoIdx].style; // 2 const colour = (i%3 === 0)?FIRST_COLOR:SECOND_COLOR ; setTimeout(() => { barOneStyle.backgroundColor=colour; barTwoStyle.backgroundColor=colour; },i*3); }else{ setTimeout(() => { const [barOneIdx,newHeight]=animations[i]; const barOneStyle=arrayBars[barOneIdx].style; barOneStyle.height=`${newHeight} px`; },i*5); } } };
and the sorting algorithm is correct and I am new to react js .Any help would be very much appreciated.