title: Can I use index of map function as key for my React components containing dynamic unpredictable text?
body: <p>I got this code where I'm parsing dynamic text into separate lines and rendering individual components for each line of text. </p>
  
  <p>I'm using the <code>map</code> function to create an array for the elements and <strong>React demands a unique key for each element on the list</strong>.</p>
  
  <p>I know usually it's not ideal to use <code>index</code> as the key. But in this case, what else can I do?</p>
  
  <p><strong>QUESTION</strong></p>
  
  <p>Can I use <code>index</code> as the <code>key</code> for the elements in this case without having issues? What could go wrong?</p>
  
  <p><strong>Note1</strong>: I cannot use the values as the keys, because all lines might have the exact same values, hence they wouldn't be unique.</p>
  
  <p><strong>Note2</strong>: This code runs inside an Admin form for BlogPosts. I write some custom markup text, just like in the textarea for questions on StackOverflow and I need to parse it to give it proper styles when rendered out on the screen as a blog post. Like: <code>**bold text**</code>, etc. And each line should be rendered as a different paragraph.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I've read the article you all mentioned in comments and answer. And here's what the author points out:</p>
  
  <hr>
  
  <p><a href="https://i.stack.imgur.com/J95le.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/J95le.png" alt="enter image description here"></a></p>
  
  <p>Does my case meet all 3 requirements?</p>
  
  <p>1 - Do they change? In theory they do. </p>
  
  <p>2 - They have no ids.</p>
  
  <p>3 - They are not filtered for sure. But are they reordered? What if you copy <code>"line1\nline2\nline3"</code> paste into Notepad and change it to <code>"line3\nline2\nline1"</code> and paste it back into the <code>textarea</code>. Does it count as re-ordering? I just tested it and it renders just fine.</p>
  
  <p>Anyway, so far I haven't run into any issues and it feels safe to use. But I would like an in-depth explanation of how it works in this case.</p>
  
  <hr>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function App() {
    const [inputValue,setInputValue] = React.useState("line1\nline2\nline3");
    const lineItems = inputValue.split("\n").map((line,index) =&gt; 
      &lt;TextLine 
        key={index}
        index={index}
        value={line}
      /&gt;
    );
    
    return(
      &lt;React.Fragment&gt;
        &lt;textarea 
          onChange={()=&gt;setInputValue(event.target.value)} 
          value={inputValue}
          style={{width: "300px", height: "60px"}}
        /&gt;
        {lineItems}
      &lt;/React.Fragment&gt;
    );
  }
  
  function TextLine(props) {
    return(
      &lt;div&gt;{props.value + " (key = " + props.index + ")"}&lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"/&gt;</code></pre>
  </div>
  </div>
  </p>