Dynamic (useRef extracted) styles not ready (assigned to useState var) in time for element mount

GH: https://github.com/nndesigns/old_cars_ltd.git Vercel: https://old-cars-ltd-4p2r-git-main-nick-nalls-projects.vercel.app/ File: vehiclePage.js (/frontend/src/pages/vehiclePage.js) The <span/> that I have circled the in picture attmt, is supposed to derive its 'left' and 'width' styles from useRef-extracted DOM styles of a particular <button/> Several buttons are mapped into the return and assigned 'ref' values that relate to the tabRefs array (blank initially). Then a useLayoutEffect, also being run at the beginning, picks out one of those mapped buttons using tabRefs array (now having value assignments), and extract that button's 'offsetLength' & 'offsetWidth', assigning them as 'width' & 'left' values to a useState object (barStyle), which is referenced in a 'style' tag by the <span/> in the return. This is meant to allow dynamic styling of the same <span/> to change as different <button/>s are clicked, to have it correspond to the current 'active' button. The problem is that, on component mount, the tabRefs array is not ready in time for this style extraction to occur/barStyle-assignment to be made, it is still an empty array, because the <button/>s that come to populate tabRefs haven't all been mapped in the return yet. Therefore no barStyle gets assigned, and <span/> doesn't receive the correct style, and instead of corresponding to the correct <button/> dimensions, spans 100% of the width of its container (see attmt 2) when the component mounts. Attmt 3 pic contains the critical logic in the component I'm referring to that causes this problem.

GitHub

GitHub - nndesigns/old_cars_ltd: Sample car site Old Cars Ltd

Sample car site Old Cars Ltd. Contribute to nndesigns/old_cars_ltd development by creating an account on GitHub.