How to use multiple ref variables on same html element in react?

Question

Here is the brief snippet of my functional component's render method(removed unnecessary code for brevity)

  return (
    <Draggable draggableId={id} index={index}>
      {(provided, snapshot) => (
        <>
          <div className="carditem" ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps} onClick={onClick}>
            <span className="carditem_title">{card.title}</span>
            <i className="fas fa-pencil-alt edit_button" onClick={onEditClick} />
            {hasDescription && <i className="fas fa-align-left desc_tag" title="This card has a description" />}
          </div>
          {isEditing && showOverlay && <input className="card_edit" type="text" autoFocus />}
        </>
      )}
    </Draggable>
  );

On line 5, if you notice I have a

ref={provided.innerRef}

I want to get the x,y coordinate of div with className="cardItem" and therefore I want to add a ref to that element. But a ref already exists as shown above. How can I add my own ref variable without breaking existing ref?

Not sure if it helps, but I am using react-beautiful-dnd and which is where that provided.innerRef comes from.

keikai · Accepted Answer · 2020-04-14 03:36:07Z

1

You can use the callback to bind multiple refs

const refHanlder = el => {
  refA.current = el;
  refB.current = el;
}

ref={el => refHandler}

The callback is also used for Array of refs

ref={el => elementRef.current[x] = el}

edited Apr 14, 2020 at 3:36

answered Apr 14, 2020 at 3:30

keikai

15.3k10 gold badges56 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

theprogrammer Over a year ago

Thanks for your answer. One small question. how do I pass provided.innerRef into refHandler function?

keikai Over a year ago

@theprogrammer It's passed implicitly and if you want to make it a param, use ref={el => refHandler(ref)} with const refHanlder = el => () => {

Collectives™ on Stack Overflow

How to use multiple ref variables on same html element in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related