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.

Answer 1

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