fix: resolve SpecialProps warning

2 files changed, 5 insertions, 5 deletions

diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
index 62273ef..41f9966 100644
--- a/src/components/PollsList/PollsList.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -16,6 +16,7 @@ const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
       index={index}
       style={style}
       key={key}
+      _key={key}
     />
   ), [polls, mutate]);
 
diff --git a/src/components/PollsList/RenderItem.tsx b/src/components/PollsList/RenderItem.tsx
index 900dae6..5123bca 100644
--- a/src/components/PollsList/RenderItem.tsx
+++ b/src/components/PollsList/RenderItem.tsx
@@ -8,11 +8,11 @@ interface PropTypes {
   mutate: (polls: Poll[], refetch: boolean) => void;
   index: number;
   style: React.CSSProperties;
-  key: string;
+  _key: string; // https://reactjs.org/warnings/special-props.html
 }
 
 const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
-  if (oldProps.key !== newProps.key) return false;
+  if (oldProps._key !== newProps._key) return false;
   if (oldProps.index !== newProps.index) return false;
   if (oldProps.polls !== newProps.polls) return false;
   // TODO: uncomment line below to listen to style updates
@@ -21,7 +21,7 @@ const compareProps = (oldProps: PropTypes, newProps: PropTypes) => {
 };
 
 const RenderItem: React.FC<PropTypes> = React.memo(({
-  polls, mutate, index, style, key
+  polls, mutate, index, style, _key
 }) => {
   const poll = polls[index];
 
@@ -35,8 +35,7 @@ const RenderItem: React.FC<PropTypes> = React.memo(({
   }, [mutate, index, polls]);
 
   return (
-    // To re-render on list resize, add this info to key
-    <div key={`${key}-${poll._id}-${polls.length}`} style={style}>
+    <div key={_key} style={style}>
       <PollCard poll={poll} setPoll={setPoll} />
     </div>
   );