Must use destructuring props assignment in className

Question

I've applied ESLint Airbnb standard to my code like:

<Button
  ref={anchorRef}
  aria-controls={open ? 'menu-list-grow' : undefined}
  aria-haspopup="true"
  onClick={handleToggle}
  className={`estimate + ${props.id}`} // for purpose of Cypress
>

I think that I do something bad in the line for Cypress, but how to improve it?

Answer 1

Your class attribute,

className={`estimate + ${props.id}`}

will expand to something like

<button class="estimate + 42">

---

I think you got the string interpolation wrong, try:

className={`estimate${props.id}`}