Get all checked checkboxes and their relative data with React + Redux

I have Changed The files please Go Through It

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import TableItem from './TableItem';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      items:[]
    };

    this.handleSelected = this.handleSelected.bind(this)
    this.handleAddItem = this.handleAddItem.bind(this)

  }

  handleSelected() {
    // how to get items here? (when user select via checkboxes.)
    const items = this.state.items;
    alert("Selected items are: " + JSON.stringify(items));

  }

   handleAddItem(e,item){
      let items = [...this.state.items]
      var ids = items.map(ele => ele.id);
      if(e.target.checked)
          items.push(item)
      else {
        var index = ids.indexOf(item.id);
        items.splice(index,1);
      }

      this.setState({items});
    }

  render() {

    // posts actually came from ajax request...
    const posts = [
      {
        id: 1,
        name: 'Text 1'
      },
      {
        id: 2,
        name: 'Text 2'
      },
      {
        id: 3,
        name: 'Text 3'
      }
    ]
   console.log(this.state.items)
    return (
      <div>
        {posts.map((fx, i) => {
           { /* here i loop them and render... */ }
          return (
            <TableItem key={fx.id} data={fx} handleAddItem={this.handleAddItem} />
          )
        })}
        <div>
        { /* I need to get checked items outisde of TableItem. */ }
        <button onClick={this.handleSelected}>Get Selected Items (with ID, Name...)</button>
        </div>
      </div>
    );
  }
}

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

TableItems.js

import React from 'react'



export default class TableItem extends React.Component {

  constructor(props) {
    super(props)
    this.state = { checked: false }
  }

  render() {

    return (
      <tr>
        <td><input onChange={(e) => this.props.handleAddItem(e,this.props.data) } type="checkbox" defaultChecked={this.state.checked} /></td>
        <td>{this.props.data.name}</td>
      </tr>
    )
  }
}

This solved my problem: https://medium.com/@wlodarczyk_j/handling-multiple-checkboxes-in-react-js-337863fd284e

But, If you have a better alternative, I'm here to listen.

Basically, I created a map and pass handleChange to TableItem. Therefore, when a checkbox is checked/unchecked, its status passed to parent component.