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

Answer 1

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;

Answer 2

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>
  );
};

Answer 3

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


   using fragment solve this issue 
    <> 
    </>