Function components cannot have refs. Did you mean to use React.forwardRef()?
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;
const renderItem = ({ item, index }) => {
return (
<>
<Item
key={item.Id}
item={item}
index={index}
/>
</>
);
};
using fragment solve this issue
<>
</>