i want to pass an argument to ref click method using javascript.
what i am trying to do?
there is a list of cards with each card having more button . clicking more button would open up a select menu with options edit, upload file and remove.
now clicking upload file option should allow user to upload file for that card.
below is the code,
const Parent = (data) => {
const fileInput = React.useRef(null);
const handleUploadClick = (id) => {
console.log('id in here', id); //this is the correct id. meaning this is the id of the
upload file button clicked for the card.
fileInput.current?.click();
}, [fileInput.current]);
return(
<>
{cardData.map(data, index) => {
const {description, id } = data;
console.log('id in map', id )
const uploadFile = (
<button onClick={() => handleUploadClick(id)}> Upload file </span>
)
const edit = (//somelogic)
const remove = (//some logic)
const options = compact([edit, uploadFile, remove]);
return (
<Card
id={id}
options={options}
>
<input type="file" ref={fileInput} style={display: 'none'}
onChange={async () => {
const file = fileInput?.current?.files?.[0];
try(
const input = {
file: file,
}
await updateFile({
variables: {
id: id!, //here id is the id of the last card so it always uploads file for last card. but not the actual card for which the upload file button
//clicked.
input,
},
});
</Card>
</>
);
}
Now the problem with above code, is in handleUploadclick method the id is correct. however handleUploadClick method triggers input type="file" element click. but in the onchange method of this input type="file" element the id is not correct. it is always the id of the last card. and hence it uploads file to the last card only. meaning it passes wrong id to the updateFile method in onchange method of input type="file".
i am not sure how to pass id to fileInput.current?.click() method in handleUploadClick or is there any other solution to fix this problem.
could someone please help me with this. thanks.
in your case you shouldn't using useRef , all you need to do is to use useState and useEffect to handle the change with passing the keys properly, you can save the file after user upload file using onChange function
const [file, setFile] = useState(null);
const handleUploadClick = () => {
console.log(file)
}
<button key={`button-${index}`} onClick={() => handleUploadClick()}> Upload file </button>
<input type="file" key={`input-${index}`} ref={fileInput} style={display: 'none'}
onChange={(e) => setFile(e.target.files[0])}
/>
folk here is the answer to your question, so let me explain first what I have done, as of your implementation the ref is not sustained as it's being replaced by every next item you return in array.map() so here we go we managed all array items refs in an itemsRef array so when we click on the specific button we can get the element/input by it's id.
import React from "react";
const inputs = [
{
name: "Input one",
id: 1
},
{
name: "Input two",
id: 2
}
];
const App = () => {
// to hold all inputs refs
const itemsRef = React.useRef([]);
// to create an empty array of inputs lenght so we can hold refs later
React.useEffect(() => {
itemsRef.current = itemsRef.current.slice(0, inputs.length);
}, []);
// to triger clicked button relative input
const handleUploadClick = React.useCallback(
(id) => {
console.log("id in here", id); //this is the correct id. meaning this is the id of the
const eleByRefId = itemsRef?.current[id]; // ref by id
eleByRefId && eleByRefId.click();
},
[itemsRef]
);
// your file uploading logics here
const handleFileChange = React.useCallback(async (e, id) => {
const file = e.target.files[0];
// your file uploading logic
// await updateFile({
// variables: {
// id: id,
// input,
// },
// });
}, []);
return (
<div style={{ display: "flex", flexDirection: "row" }}>
{inputs.map((data, index) => {
const { id, name } = data;
return (
<div key={index} style={{ marginRight: 10 }}>
<input
type="file"
key={id}
ref={(el) => (itemsRef.current[id] = el)} // the magic part is happening here
style={{ display: "none" }}
onChange={(e) => handleFileChange(e, id)}
/>
<button onClick={() => handleUploadClick(id)}>{name}</button>
</div>
);
})}
</div>
);
};
export default React.memo(App);
Here is the codesandbox