How to pass both event and parameters to a react function?

Question

I'm trying to pass both arguments and event to an external function in React.

If I invoke it this way,

 cell={ function (e){
                return CellWithEditing(x,y,z)
              }

It cannot find "this" and says props of undefined. As this is an external function I cannot even bind this.

This code works without the event -

 <GridColumn
          title="Manage"
          width="190px"
          minResizableWidth={170}
          cell={ CellWithEditing(
              this.props.config.title,
              this.props.manageGrid.edit,
              this.props.manageGrid.remove,
              this.props.manageGrid.addUsers,
              this.props.permission
            );
          }
          sortable={false}
          filterCell={this.emptyCell}
        />

The function outside the default class being called -

function CellWithEditing(x, y, event) {
  return class extends GridCell {
    constructor(props) {
      super(props);
      this.core = this.props.args;
    }

    render() {
      return (
       <h1>Sample Data</h1>
      );
    }
  };
}

This code does not work, when I use arrow function -

 <GridColumn
          title="Manage"
          width="190px"
          minResizableWidth={170}
          cell={ 
              (e)=>{
              CellWithEditing(
              this.props.config.title,
              this.props.manageGrid.edit,
              e)
             }
        }
          sortable={false}
          filterCell={this.emptyCell}
     />

I expect the function to be returned along with the event data.

Try adding `return` as `cell={ (e)=>{ return CellWithEditing()}`. — ravibagul91, Jul 31 '19 at 06:29
@ravibagul91 Yes I tried that. But it thows "Functions are not valid as a React child" error. — prajwaldivate, Jul 31 '19 at 06:31
What happens when you try using the last approach? Are you getting any error? — SiddAjmera, Jul 31 '19 at 06:32
That function returns a *class*. You need an instance though, something like: `cell={}` — , Jul 31 '19 at 06:37
Because your are returning a function only - `return class extends GridCell`, try to return simple data. — ravibagul91, Jul 31 '19 at 06:37

How to pass both event and parameters to a react function?

0 Answers0