Why is this function logging undefined when calling it?

Question

I have a retrieved array of files that have been filtered and put into state. I can display the files using this:

<List items={this.state.filtPanelMeetFiles.map(file => <div>{file.FileLeafRef}</div>)} onRenderCell={this._onRenderCellFiles} />

and this:

private _onRenderCellFiles = (item) => {
    return(
      <div>
    
        <tr data-is-scrollable>
          <td style={{ width: '150px' }} >{item}</td>
          <td style={{ width: '150px' }} >{item.Id}</td>
          <td style={{ width: '15px' }}>
            <div className={styles.editIcon}><Icon iconName="Delete" id={item.Id} onClick={( this._deleteFile)}/>
            </div>
          </td>
        </tr>

      </div>
    );
  }

I want this function:

public _deleteFile = (ev) => {
    const sid = ev;
    console.log(sid);
  }

To get the id of clicked file, but it's logging undefined. I can see the ID of each file in the array in state but how would I get hold of the ID?

I have identical code in another project but that retrieves items not files. This code works (in the other project) but not in this one. What is different and is the id={item.Id} actually doing anything useful here?

This is what is stored in the filtered state if it helps:

score 0 · Accepted Answer · answered Nov 12 '20 at 17:42

0

Found it finally!

<div className={styles.editIcon}><Icon iconName="Delete" id={item.Id.toString()} onClick={() => this._deleteFile(item.Id)}/>


<List items={this.state.filtPanelMeetFiles} onRenderCell={this._onRenderCellFiles} />

answered Nov 12 '20 at 17:42

NightTom

418
15
37

Why is this function logging undefined when calling it?

1 Answers1