How to pass argument to ref click method using react and javascript?

Question

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.

The quick solution is, you can use `document.getElementById(id)`, or you need to have a HOC component or you can also save all of the elements refs in an array. — Ali Hussnain - alichampion, Mar 08 '22 at 12:50
For managing multiple elements refs https://stackoverflow.com/a/56063129/9626938 — Ali Hussnain - alichampion, Mar 08 '22 at 12:51
thanks but could you please post an answer to this so that i can have an idea. — stackuser, Mar 08 '22 at 13:14
Check this out I have posted my answer accept it when it works for you https://stackoverflow.com/a/71396759/9626938 — Ali Hussnain - alichampion, Mar 08 '22 at 21:27

score 0 · Accepted Answer · answered Mar 08 '22 at 12:51

0

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])} 
/>

answered Mar 08 '22 at 12:51

fadi omar

740
5
15

thanks. but how do i get the correct id that i am passing as variable to API await updateFile which i am calling within onchange method of input type="file" – stackuser Mar 08 '22 at 13:10
1

i have used state to set the id and pass that to api. this works. thanks – stackuser Mar 08 '22 at 13:33
hey @stackuser if it helps you, please don't forget to vote the answer – fadi omar Mar 09 '22 at 08:46

score 0 · Answer 2 · answered Mar 08 '22 at 14:37

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

How to pass argument to ref click method using react and javascript?

2 Answers2