Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

'asUploadButton' causing React warning

See original GitHub issue

Using asUploadButton like in the example causing the following warning in the console:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(AsUploadButton)`.
    in Unknown (created by ForwardRef(AsUploadButton))

Versions Uploady 0.5.0 React 16.13.1

Code

import React, { useState } from 'react'
import ChunkedUploady, {
  useBatchStartListener,
  useBatchFinishListener
} from '@rpldy/chunked-uploady'
import { asUploadButton } from '@rpldy/upload-button'
import { Button } from 'antd'
import { UploadOutlined } from '@antd-design/icons'

const UploadButton = asUploadButton(props => {
  const [visible, setVisible] = useState(true)

  useBatchStartListener(() => {
    setVisible(false)
  })
  useBatchFinishListener(() => {
    setVisible(true)
  })

  return visible ? (
    <Button shape="circle" {...props}>
      <UploadOutlined />
    </Button>
  ) : null
})

const Upload = (props) => {
  return (
      <ChunkedUploady
        destination={{
          url: props.url
        }}
        multiple={props.multiple}
        withCredentials={true}
        params={props.params}
        accept={props.accept}
      >
        <UploadButton  />
      </ChunkedUploady>
  )
}

export default Upload