Meteor-react props reference passes all records to delete component instead of selected one

I do try to add submit modal to handle user confirmation when he wants to delete a record.

Current expirience:

I did add componentDidMount to DeletePost and in console I do see that when page loads each record receive its own delete form with passes record data to it.

But when the form opens and is being submitted it logs the first record of the collection. I did tried to delete record with a photo (with rainbow made of strings) and have the following situation:

Mapping over each component in posts collection.

import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Posts } from '../../../../imports/collections/posts';
import moment from 'moment';

//Components
import DeletePost from './deletepost';


class PostsList extends Component {


  renderData(){
    retu this.props.posts.map(post => {
      let {title, social, link, link_image, time=moment(post.createdAt).fromNow()} = post;
      retu (
        <div key={post._id} className='social-post'>
            // Content

            // Triggers modal DeletePost
            <button type="button" className='form-button button-gradient' data-toggle="modal" data-target="#modalDelete">Delete</button>
          </div>

          // Passing post into child component
          <DeletePost post={post}/>
        </div>
      );
    })
  }

  render() {
    retu (
      <div>
        {this.renderData()}
      </div>
    );
  }
}


export default createContainer(() => {
  Meteor.subscribe('posts');
  retu { posts: Posts.find({}).fetch() }
}, PostsList);

DeletePost Component

import React, { Component } from 'react';

class DeletePost extends Component {


  componentDidMount(){

     // When the page loads in the console I do have all records the currently exist inside the collection.
    console.log(this.props.post);
  }


  handleDelete(event) {
    event.preventDefault();
    $('.modalDelete').modal('hide');

    // But when I click on submit it always log the current first record in the collection
    console.log(this.props.post)
  }


  // <p>Are you really sure about that?</p>

  render() {
    retu (
        <div className="modal fade form-delete modalDelete" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div className="form-outer">
            <form className='delete_post' onSubmit={this.handleDelete.bind(this)}>

              // Submit button
              <button type="sumbit" className="form-button button-delete">Yes</button>

    );
  }
}

export default DeletePost;