From a3a9683bf742c18ec02efb43cc42031ba89dcc41 Mon Sep 17 00:00:00 2001
From: Stuart Taylor <staylor1012@gmail.com>
Date: Thu, 28 Dec 2017 18:56:24 +0000
Subject: [PATCH] fix(step-keys): Use description slice for key

---
 common/app/routes/Challenges/views/step/Step.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/common/app/routes/Challenges/views/step/Step.jsx b/common/app/routes/Challenges/views/step/Step.jsx
index 477b68fb8c..03634c7cad 100644
--- a/common/app/routes/Challenges/views/step/Step.jsx
+++ b/common/app/routes/Challenges/views/step/Step.jsx
@@ -177,13 +177,13 @@ export class StepChallenge extends PureComponent {
     step,
     stepBackward,
     stepForward
-  }, index) {
+  }) {
     if (!Array.isArray(step)) {
       return null;
     }
     const [imgUrl, imgAlt, info, action] = step;
     return (
-      <div key={ `${imgUrl}-step-wrapper-${index}` }>
+      <div key={ `${info.slice(0, 15)}` }>
         <a
           href={ imgUrl }
           onClick={ clickOnImage }
@@ -241,8 +241,8 @@ export class StepChallenge extends PureComponent {
     if (!Array.isArray(steps)) {
       return null;
     }
-    return steps.map(([ imgUrl, imgAlt ], index) => (
-      <div key={ `${imgUrl}-images-wrapper-${index}` }>
+    return steps.map(([ imgUrl, imgAlt, info ]) => (
+      <div key={ `${info.slice(0, 15)}` }>
         <Image
           alt={ imgAlt }
           responsive={ true }