score:0

onClick={() => ProductsPage.prototype.handleClick(record)}

score:0

<Table pagination={false} dataSource={this.state.responsible}>
    <Column title="name" dataIndex="name" key="name" />
    <Column title="Category" dataIndex="email" key="Category" />

  <Column title="Actions" dataIndex="Actions" key="Actions"
 render={(text, element, index)=>{
   return (<div>
    <i className="fas fa-edit text-success m-1" style={{ cursor: "pointer" }}
      onClick={() => this.handleClick()}
    ></i>
    <i className="fas fa-trash text-danger m-1" style={{ cursor: "pointer" }}
      onClick={() => {this.Delete(element._id)
 
      }}
    ></i>

  </div>)
 }}
  />
      
      </Table>   

score:2

 <Table {...this.state}
    columns={getColumns(this.handleClick)} // and Here
    dataSource={state.hasData ? this.props.products : null}
    footer={() => this.getFooterDetails(this.props.products)}
    pagination={{ pageSize: 5 }}
   />

score:3

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Table, Icon, Switch, Radio, Form, Divider, Button, Modal } from 'antd';

import * as productActions from './../../redux/actions/productActions';


let footer = () => 0;


class ProductsPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      bordered: true,
      loading: false,
      pagination: { position: 'bottom' },
      size: 'small',
      expandedRowRender,
      title: title,
      showHeader: true,
      footer,
      rowSelection: {},
      hasData: true,
    };

     handleClick = product => {
        this.setState({
           visibleDeletePopup: true
       });
    }
    //Popup and submit button
    this.state.buttonSubmitLoader = false; // never mutate state like this instead use setState method
    this.state.visibleDeletePopup = false;
  }

  showModal = () => {
    this.setState({
      visibleDeletePopup: true,
    });
  }

  handleOk = () => {
    this.setState({ buttonSubmitLoader: true });
    setTimeout(() => {
      this.setState({ buttonSubmitLoader: false, visibleDeletePopup: false });
    }, 3000);
  }

  handleCancel = () => {
    this.setState({ visibleDeletePopup: false });
  }

  componentDidMount() {
    const props = this.props;
    props.actions.loadProducts();
  }

  courseRow = (item, index) => {
    return <li key={index}>{item.name}</li>;
  }

  onProductSave = product => {
    this.props.actions.createProduct(product);
    this.setState({
      product: ""
    });
  }

  onChange = e => {
    this.setState({
      product: e.target.value
    });
  }

  getFooterDetails = products => {
    return <label class="text-success">Total Records Count is {products.length}</label>;
  }


  render() {
    const { hasData } = this.state;
    const { products } = this.props;
    const columns = [{
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 150,
      render: text => <a href="javascript:;">{text}</a>,
    }, {
      title: 'Full',
      dataIndex: "stockIn['full']",
      key: `stockIn['full'`,
      width: 70,
    },
    {
      title: 'Half',
      dataIndex: "stockIn['half']",
      key: `stockIn['half'`,
      width: 70,
    },
    {
      title: 'Quarter',
      dataIndex: "stockIn['quarter']",
      key: `stockIn['quarter'`,
      width: 70,
    },
    {
      title: '90',
      dataIndex: "stockIn['ninty']",
      key: `stockIn['ninty']`,
      width: 70,
    }, {
      title: 'Category',
      dataIndex: 'category',
      key: 'category',
    }, {
      title: 'Action',
      key: 'action',
      width: 360,
      render: (text, record) => (<span>
        <button href="javascript:;" onClick={() => this.handleClick(record)}>Edit-{record.name}</button>
      </span>
      ),
    }];
    return (
      <div>
        <div>
          <Table {...this.state}
            columns={columns}
            dataSource={hasData ? products : null}
            footer={() => this.getFooterDetails(products)}
            pagination={{ pageSize: 5 }}
          />
        </div>
      </div>
    );
  }
}


const mapStateToProps = (state, ownProps) => {
  //In state.products, product is coming from root reducer, if you change 
  //the name products to abhi_products , then here you need to call products:state.abhi_products 
  return {
    products: state.products
  }
}

const mapDispatchToProps = dispatch => {
  return {
    actions: bindActionCreators(productActions, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(ProductsPage);

Related Query

More Query from same tag