I have been trying to find a way to compare the id of an HTML element inside of the map function with the id of an object outside the map function. I'm looking for some guidance on how to do this and what the best practice is. When post 1 is clicked It should only show post 1. I've put together a simple example so it is easy to see what I'm trying to do.

In the filter method how do I make the comparison of id of element clicked and id that matches from the posts array of objects.

```
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
  constructor() {
    super();
       this.showPost = this.showPost.bind(this),      

    this.state = {

      posts: [{
          question: 'post 1',
        body: 'BLAH BLAH BLAH BLAH',
        postType: 'Question',
        Id: 123,
      },
      {
          question: 'post 2',
        body: 'BLAH BLAH BLAH BLAH',
        postType: 'Question',    
        Id: 133,
      },
      ],

      openedPost: false,

    };
  }

showPost() {
  console.log("post shown");
  this.setState({ openedPost: true });
}

  render() {
    const posts = this.state.posts.map((item) => 
    <div key={item.Id}> 
      <h1 Id={item.Id} onClick={this.showPost}> {item.question} </h1> 
    </div>
        )
      if(this.state.openedPost) {
       const clickedPost = this.state.posts.filter(function(item) {
           return 
    })

      }
    return (
      <div>
      {posts}
      {clickedPost}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

```

[project](https://stackblitz.com/edit/react-zwgerk?embed=1&file=index.js)