aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/components/PollsList/PollsList.tsx1
-rw-r--r--src/components/PollsList/RenderItem.tsx9
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>
);