Passing multiple methods in props ReactJS

Viewed 2619

I have a main App component that includes this...

changeAmount(a) {
  console.log('changing: ', a);
}

<Table 
     data={result}
     onClick={() => this.changeAmount()}
/>

The <Table> component then has a <TableRow> component which has two buttons within it. Is there a way to pass multiple onClick methods so I can use one for decrease and one for increase ?

export default class TableRow extends Component {
  render() {
    const {row, onClick} = this.props;
      return (
      <tbody>
        <tr>
            .....
            <span>

              <button 
                 className="btn btn-outline-primary btn-sm minusBtn"
                 onClick={onClick}
              >
                -
              </button>
            .....
          </tr>
      </tbody>
    )
  }
 }

Edit: Tried using one handler with a parameter:

App component:

<Table 
   data={result}
   onClick={(type) => this.changeAmount(type)}
/>

Table component:

{
   data.map(row => (
      <TableRow key={row._id} row={row} onClick={onClick}/>
   ))
}

TableRow component:

<button 
    className="btn btn-outline-primary btn-sm minusBtn"
    onClick={this.props.onClick('decrease')}
>
1 Answers
Related