Must use destructuring theme assignment react/destructuring-assignment

I am trying to start a typescript project but i’m getting a bunch of errors relating to "Line 92:27: Must use destructuring theme assignment react/destructuring-assignment". I have about 10 of these errors.

The error specifically for above is relating to the code for line 92 is:

<StyledClose color={theme.colors.textSubtle} onClick={removeThisPopup} />

This is apart of this overall code which onClick={removeThisPopup} is used towards the bottom of the code.

export default function PopupItem({
  removeAfterMs,
  content,
  popKey
}: {
  removeAfterMs: number | null
  content: PopupContent
  popKey: string
}) {
  const removePopup = useRemovePopup()
  const removeThisPopup = useCallback(() => removePopup(popKey), [popKey, removePopup])
  useEffect(() => {
    if (removeAfterMs === null) return undefined

    const timeout = setTimeout(() => {
      removeThisPopup()
    }, removeAfterMs)

    return () => {
      clearTimeout(timeout)
    }
  }, [removeAfterMs, removeThisPopup])

  const theme = useContext(ThemeContext)

  let popupContent
  if ('txn' in content) {
    const {
      txn: { hash, success, summary }
    } = content
    popupContent = <TransactionPopup hash={hash} success={success} summary={summary} />
  } else if ('listUpdate' in content) {
    const {
      listUpdate: { listUrl, oldList, newList, auto }
    } = content
    popupContent = <ListUpdatePopup popKey={popKey} listUrl={listUrl} oldList={oldList} newList={newList} auto={auto} />
  }

  const faderStyle = useSpring({
    from: { width: '100%' },
    to: { width: '0%' },
    config: { duration: removeAfterMs ?? undefined }
  })

  return (
    <Popup>
      <StyledClose color={theme.colors.textSubtle} onClick={removeThisPopup} />
      {popupContent}
      {removeAfterMs !== null ? <AnimatedFader style={faderStyle} /> : null}
    </Popup>
  )

I have found that this react/destructuring-assignment issue is due to eslint.. specifcally airbnb but i am unsure how to amend the code above to abide by the rule.

Thanks.

>Solution :

So, to align with eslint rules you need to destructure the theme object.

For example:

const theme = useContext(ThemeContext)
const { colors } = theme
const { textSubtle } = colors

Then pass textSubtle to StyledClose component

<StyledClose color={textSubtle} onClick={removeThisPopup} />

This should remove the warnings you are seeing.