how to trigger function from outside in the class react

Question

here is my column definition for the react data table. in the last column, I'm trying to trigger btnClickedHandler function from outside the class. but now it's throwing error like this -> [TypeError: undefined has no properties].

that means this keyword is not working. because it's not inside the class. I have found that issue. but I really need to trigger that function from the outside in the class.

sorry for the language issue. Thanks in advance!

 const columns = [
      {
        name: "Ticket",
        selector: "tkn",
        sortable: true
      },
      {
        name: "Ticket Date",
        selector: "tdt",
        sortable: true
      },
      {
        name: "Client",
        selector: "cna",
        sortable: true
      },
      {
        name: "Required By",
        selector: "tun",
        sortable: true
      },
      {
        name: "Title",
        selector: "ttt",
        sortable: true
      },
      {
        name: "Time Spent",
        cell:(row) => (
            <div>
             <ReactTimeAgo date={!isNaN(toTimestamp(row.tsp))?toTimestamp(row.tsp):1900125000} locale="en-US" timeStyle="round"/>
            </div>
        ),
        sortable: true
      },
      {
        name: "Progress",
        selector: "pgs",
        sortable: true
      },
      {
        name: "Option",
        cell:(row) => (
          <UncontrolledButtonDropdown style={{width:'150px'}}>
          <Button 
          style={{width:'150px'}}
          color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'} 
          className="btn-sm" 
          onClick={ (e) => **this.btnClickedHandler**((row.tst == 0 || row.tst == 3)?2:(row.tst == 5)?5:1)} >{(row.tst == "0" || row.tst == "3")?'Preview': (row.tst == "5")?'Close':'Reply'}
          </Button>
    
          <DropdownToggle
            className="dropdown-toggle-split"
            color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'}
            caret
          >
            <ChevronDown size={15} />
          </DropdownToggle>
          <DropdownMenu style={{display:(row.tst == "0" || row.tst == "3")?'none':'', zIndex:2000}}>
            <DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(2)} style={{display:(row.tst == "0" || row.tst == "3")?'none':''}}>Preview</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(3)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Create Task</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(4)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Finish</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(5)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "1" || row.tst == "3" || row.tst == "5")?'none':''}}>Close</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(7)} style={{display:(row.tst != "1")?'none':''}}>Reject</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => this.btnClickedHandler(6)} style={{display:(row.tst != "1")?'none':''}}>Terminate</DropdownItem>
          </DropdownMenu>
        </UncontrolledButtonDropdown>
        ),
        ignoreRowClick: true,
        allowOverflow: true,
        button: true,
      }
    ]

score 1 · Accepted Answer · answered Nov 05 '20 at 07:59

You could probably pass in btnClickedHandler as a parameter to your function.

cell:(row, btnClickedHandler) => (
          <UncontrolledButtonDropdown style={{width:'150px'}}>
          <Button 
          style={{width:'150px'}}
          color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'} 
          className="btn-sm" 
          onClick={ (e) => btnClickedHandler((row.tst == 0 || row.tst == 3)?2:(row.tst == 5)?5:1)} >{(row.tst == "0" || row.tst == "3")?'Preview': (row.tst == "5")?'Close':'Reply'}
          </Button>
    
          <DropdownToggle
            className="dropdown-toggle-split"
            color={(row.tst == "0")?'danger':(row.tst == "2")?'primary':(row.tst == "3")?'success':(row.tst == "5")?'suspend':'warning'}
            caret
          >
            <ChevronDown size={15} />
          </DropdownToggle>
          <DropdownMenu style={{display:(row.tst == "0" || row.tst == "3")?'none':'', zIndex:2000}}>
            <DropdownItem tag="a" onClick={ (e) => btnClickedHandler(2)} style={{display:(row.tst == "0" || row.tst == "3")?'none':''}}>Preview</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => btnClickedHandler(3)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Create Task</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => btnClickedHandler(4)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "2" || row.tst == "3" || row.tst == "5")?'none':''}}>Finish</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) =>  btnClickedHandler(5)} style={{display:(row.tst == "4" || row.tst == "0" || row.tst == "1" || row.tst == "3" || row.tst == "5")?'none':''}}>Close</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => btnClickedHandler(7)} style={{display:(row.tst != "1")?'none':''}}>Reject</DropdownItem>
            <DropdownItem tag="a" onClick={ (e) => btnClickedHandler(6)} style={{display:(row.tst != "1")?'none':''}}>Terminate</DropdownItem>
          </DropdownMenu>
        </UncontrolledButtonDropdown>
        ),

how to trigger function from outside in the class react

1 Answers1