refactor(web): fix-unique-id-as-key-instead-of-array-index

kleros · Jan 5, 2024 · 18c288f · 18c288f
1 parent e69f849
commit 18c288f
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 10 deletions.
diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx
@@ -82,7 +82,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
         {isUndefined(disputeTemplate) ? null : <h3>Voting Options</h3>}
         <AnswersContainer>
           {disputeTemplate?.answers?.map((answer: IAnswer, i: number) => (
-            <Answer key={`${answer.title}-${i}`}>
+            <Answer key={answer.title}>
               <small>Option {i + 1}:</small>
               <label>{answer.title}</label>
             </Answer>
@@ -94,8 +94,8 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeTemplate }) =
         <>
           <Divider />
           <AliasesContainer>
-            {disputeTemplate.aliases.map((alias, index) => (
-              <AliasDisplay alias={alias} key={`${alias.address}-${index}`} />
+            {disputeTemplate.aliases.map((alias) => (
+              <AliasDisplay alias={alias} key={alias.address} />
             ))}
           </AliasesContainer>
         </>

diff --git a/web/src/context/NewDisputeContext.tsx b/web/src/context/NewDisputeContext.tsx
@@ -10,6 +10,7 @@ export type Answer = {
 };
 
 export type Alias = {
+  id?: string;
   name: string;
   address: string | Address;
 };
@@ -55,10 +56,13 @@ const initialDisputeData: IDisputeData = {
   title: "",
   description: "",
   question: "",
-  answers: [{ title: "" }, { title: "" }],
+  answers: [
+    { title: "", id: "1" },
+    { title: "", id: "2" },
+  ],
   aliases: [
-    { name: "", address: "" },
-    { name: "", address: "" },
+    { name: "", address: "", id: "1" },
+    { name: "", address: "", id: "2" },
   ],
 };
 const initialDisputeTemplate = initialDisputeData as IDisputeTemplate;

diff --git a/web/src/pages/Resolver/Parameters/CounterParties.tsx b/web/src/pages/Resolver/Parameters/CounterParties.tsx
@@ -44,7 +44,7 @@ const CounterParties: React.FC = () => {
 
   //value here is the total number of fields-
   const updateAliases = (value: number) => {
-    let defaultAlias = { name: "", address: "" };
+    let defaultAlias = { name: "", address: "", id: value.toString() };
     let aliases = disputeData.aliases;
 
     if (isUndefined(aliases)) {
@@ -68,7 +68,7 @@ const CounterParties: React.FC = () => {
       <Header text="Counterparties" />
       <MiddleContainer>
         {disputeData.aliases?.map((alias, index) => (
-          <AliasContainer key={index}>
+          <AliasContainer key={alias?.id}>
             <LabeledInput
               name="name"
               label={`Party ${index + 1}`}

diff --git a/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx b/web/src/pages/Resolver/Parameters/VotingOptions/OptionsFields.tsx
@@ -28,7 +28,7 @@ const OptionsFields: React.FC = () => {
   const { disputeData, setDisputeData } = useNewDisputeContext();
 
   const updateOptions = (value: number) => {
-    let defaultAnswer: Answer = { title: "" };
+    let defaultAnswer: Answer = { title: "", id: value.toString() };
     let answers = disputeData.answers;
 
     if (value < answers?.length) return setDisputeData({ ...disputeData, answers: answers.splice(0, value) });
@@ -48,7 +48,7 @@ const OptionsFields: React.FC = () => {
             name="title"
             label={`Voting Option ${index + 1}`}
             placeholder="eg. Pay 150 DAI"
-            key={index}
+            key={answer?.id}
             value={answer.title ?? ""}
             onChange={(event) => handleOptionWrite(event, index)}
           />