Basics - Lists & keys example 4. usage of same key for different arrays.

App.js

import React, { Component } from "react";

export class App extends Component {
  render() {
    const posts = [
      { id: 1, title: "hello world", content: "welcome to the react world" },
      {
        id: 2,
        title: "installation",
        content: "you can install react from npm"
      }
    ];
    return (
      <div>
        <Blog posts={posts} />
      </div>
    );
  }
}

function Blog(props) {
  const posts = props.posts;

  const sidebar = (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );

  const content = posts.map(post => (
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  ));

  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

export default App;