Function components cannot have refs. Did you mean to use React.forwardRef()?

Question

Hi I am trying to choose file form my computer and display the file name on input field but I am getting this error

Function components cannot have refs. Did you mean to use React.forwardRef()

https://stackblitz.com/edit/react-aogwkt?file=bulk.js

here is my code

import React, { Component } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  Input,
  InputAdornment,
  withStyles
} from "@material-ui/core";
import Attachment from "@material-ui/icons/Attachment";
import CloudDownload from "@material-ui/icons/CloudDownload";
const BulkUpload = props => {
  const { classes } = props;
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={'abc'}
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
              // this.refs['abc'].click();
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

export default BulkUpload;

I just wanted to show selected file name on input field

This might help someone encountering this error while using Native Link Component on NextJS: https://stackoverflow.com/a/69767229/3556531 — KeshavDulal, Oct 29 '21 at 10:19

Shubham Khatri · Accepted Answer · 2019-03-20T08:06:08.057

If you are using v16.8.0 or above of react you can make use of hooks useRef method to define a ref and use it

import React, { Component, useRef } from "react";
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle,
  FormControl,
  IconButton,
  Input,
  InputAdornment,
  withStyles
} from "@material-ui/core";
import Attachment from "@material-ui/icons/Attachment";
import CloudDownload from "@material-ui/icons/CloudDownload";
const BulkUpload = props => {
  const { classes } = props;
  const inputRef = useRef(null);
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef }
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
                 inputRef.current.click();
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

export default BulkUpload;

If you are using a lower version between v16.3.0 and v16.8.0, you can make use of React.createRef

const BulkUpload = props => {
  const { classes } = props;
  const inputRef = React.createRef(null);
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef}
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
                 inputRef.current.click();
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

export default BulkUpload;

Or else if you are using an even lower version then you need to convert your component into class component and use ref using callback refs like

class BulkUpload extends Component {
   render() {
      const { classes } = this.props;
      return (
        <div className="App">
          <input
            id="file_input_file"
            className="none"
            type="file"
            ref={(ref) => this.inputRef = ref}
          />
          <Input
            id="adornment-attachment"
            type="text"
            fullWidth

            endAdornment={
              <InputAdornment position="end">
                <IconButton
                  aria-label="Toggle password visibility"
                  onClick={e => {
                     this.inputRef.click();
                  }}
                  className="login-container__passwordIcon"
                >
                  <Attachment />
                </IconButton>
              </InputAdornment>
            }
          />
        </div>
      );
    };
}

export default BulkUpload;

thanks for your answer. I'm using 16.9, but working with existing React Native code that was written with 16.3.1. It uses the old style with `ref=...` etc. I don't know anything about hooks yet. What's the best approach here? Should I read up on hooks and implement them like you've done above, or is there a simpler way? — gkeenley, Jan 26 '20 at 21:45

score 1 · Answer 2 · answered Mar 22 '21 at 10:45

1

const renderItem = ({ item, index }) => {
            return (
            <>          
            <Item
                key={item.Id}
                item={item}
                index={index}
            />
            </>
        );
    };


   using fragment solve this issue 
    <> 
    </>

answered Mar 22 '21 at 10:45

Keshav Gera

10,807
1
75
53

Strange... But helped for me. Thank you, Keshav! – Dawid Gałecki Nov 22 '21 at 21:12

score 0 · Answer 3 · answered Mar 20 '19 at 07:59

The problem here is that you are using a very outdated method of using refs. You need to change your code to something like this

const BulkUpload = props => {
  const { classes } = props;
  let inputRef = React.createRef();
  return (
    <div className="App">
      <input
        id="file_input_file"
        className="none"
        type="file"
        ref={inputRef}
      />
      <Input
        id="adornment-attachment"
        type="text"
        fullWidth

        endAdornment={
          <InputAdornment position="end">
            <IconButton
              aria-label="Toggle password visibility"
              onClick={e => {
                inputRef.current.click()
              }}
              className="login-container__passwordIcon"
            >
              <Attachment />
            </IconButton>
          </InputAdornment>
        }
      />
    </div>
  );
};

Function components cannot have refs. Did you mean to use React.forwardRef()?

3 Answers3

Linked