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}`}

Answer 2

The problem was also that I two times was trying to get id, I was trying props.id but also:

  const {
    deleteEstimate /* eslint-disable-line no-shadow */,
    downloadReport /* eslint-disable-line no-shadow */,
    setNotification,
    id,
    name,
    tableRow,
  } = props;