Passing props to actions component

[aftabnaveed]

I am trying to pass an action to the GroupActions component, but not sure how is it doable here. I have a container component <GroupPage /> which is decorated by redux connect with bindActionCreators. Here is how it looks.

   <GroupPage>
        <GroupTable />
   </GroupPage>

And this my GroupTable

export const GROUP_TABLE = 'groupsTable';
const columns = [
    { key: 'id', header: 'ID', sortable: true, primaryKey: true },
    { key: 'name', header: 'Name', sortable: true, searchable: true },
    { key: 'actions', header: 'Actions', Component: GroupTableActions },
];

class GroupTable extends React.Component {
    render() {
        return (<Table {...this.props} columns={columns}  />);
    }
}

export default sematable(GROUP_TABLE, GroupTable, columns);

Here it renders GroupTableActions in GroupTable component, which looks like this.

class GroupTableActions extends React.Component {

    constructor(props) {
        super(props)
        this.handleDeleteGroup = this.handleDeleteGroup.bind(this);
    }

    handleDeleteGroup() {
        this.props.deleteGroup(this.props.row.id);
    }

    render() {
        const row = this.props.row;
        console.log(this.props.deleteGroup);
        return (
            <div className="btn-group">
                <button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown"
                        aria-expanded="false">
                    ...
                    <span className="sr-only">Toggle Dropdown</span>
                </button>
                <ul className="dropdown-menu" role="menu">
                    <li>
                        <Link to={`/frontend/group/edit/${row.id}`} onClick={this.handleDeleteGroup}>
                            Edit
                        </Link>
                    </li>
                    <li>
                        <Link to={`/frontend/delete/${row.id}`}>
                            Delete
                        </Link>
                    </li>
                </ul>
            </div>

        );
    }
}
export default GroupTableActions;

What I want here is when delete on each item in the table is clicked, I want to dispatch the deleteGroup action. But I am not sure how can I pass my actions from parent component (GroupPage />) to the GroupActions component ?