From e069bf18055bdd4ad1697aac59e8a179fc10bad5 Mon Sep 17 00:00:00 2001
From: omsaggau <omsaggau@gmail.com>
Date: Fri, 23 Feb 2024 12:33:46 +0100
Subject: [PATCH] Add comment describing ref usage

---
 src/components/PictureCard/index.jsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/components/PictureCard/index.jsx b/src/components/PictureCard/index.jsx
index bdf1e062..4041a0bf 100644
--- a/src/components/PictureCard/index.jsx
+++ b/src/components/PictureCard/index.jsx
@@ -77,3 +77,21 @@ PictureCard.propTypes = {
 };
 
 export default PictureCard;
+
+/*
+ref={element => {
+	// Using ref for multiple purposes, so need to set it manually
+	if (typeof ref === 'function') ref(element);
+	// eslint-disable-next-line no-param-reassign
+	else if (ref) { ref.current = element; }
+	hoverRef.current = element;
+}}
+
+The ref is set in this way so it can be both used by a parent component with useRef and the internal hoverRef hook.
+The 'if (typeof ref === 'function')'  is used so a parent can use the two commonly used syntaxes for setting refs
+
+Both of these will now work:
+ <PictureCard ref={(element) => (cards.current[index] = element)}
+ <PictureCard ref={myRef}
+The first example is the most used way to set refs on components in .map functions.
+*/