0

I am trying to target the width of the , which is nested within in Input component:

 <Input
                      name="sprintCycle"
                      type="number"
                      placeholder={t('team.sprint_cycle.placeholder')}
                      label={t('team.sprint_cycle.label')}
                      suffix={() => <span className="weeks-span">{t('weeks')}</span>}
                      required
                    />

I used the the getBoundingClientRect(), but it seems to return null, for some reason.

let weeksSpan = document.querySelector("weeks-span");
let getWidth = weeksSpan.getBoundingClientRect().width;
const weeksSpanWidth = getWidth;

Any workaround ideas?

React Noob
  • 3
  • 1
  • where are you executing the above logic – Shubham Khatri Mar 18 '21 at 13:27
  • 1
    [`getBoundingClientRect`](https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect) never returns `null`. The `null` you're getting is from `querySelector`, because you don't have any elements matching the selector `weeks-span` since that's a tag selector, not a class selector. To select by class, you need a `.` in front of the class name: `let weeksSpan = document.querySelector(".weeks-span");` But using `querySelector` in a React app is almost always an anti-pattern. Look at [refs](https://reactjs.org/docs/refs-and-the-dom.html). – T.J. Crowder Mar 18 '21 at 13:29

0 Answers0