Adding more paramaters to a function with RenderRow (Onsen-UI)

Question

So I have a list that currently calls a function to generate the ListItems, but I want to pass more info to it.

<List
  dataSource={this.state.addedArry}
  renderRow={this.renderList}
/>

Calls

  renderList = (user, index) => {
    return (
      <ListItem key={user.key}>
        <div className='left'>
          <img src={`https://robohash.org/${user.key}`} alt={""} className='list-item__thumbnail' />
        </div>
        <div className='center'>
          {user.name}
        </div>
        <div className='right'>
          <Button onClick={() => this.clickedRemoveEventHandler(user, index, this.state.userArry, this.state.addedArry)}>Remove</Button>
        </div>
      </ListItem>
    );
  }

I'm hoping there is a way to pass different data to it like this.state.userArry or something.

So the final call will look something like:

renderList = (user, index, inputArry, outoutArry) => { ... }

I've tried things like renderRow={this.renderList(var1, var2)} but they didn't work and I assume that has to do with the underlying map function

Any help would be awesome!

Answer 1

Normally you would just access the extra info through props or state (i.e. this.props.inputArray). However, if you really want to pass more parameters, there are several ways:

• Binding the function beforehand to provide default params: renderList = renderList.bind(this, inputArray, outputArray);. Then, renderList will get 4 params: renderList(inputArray, outputArray, data, index) { ... }

• Binding the function "in place": renderRow={renderList.bind(this, inputArray, outputArray)}. Same arguments as the case before.

• Redirecting the arguments with an anonymous function: renderRow={(data, index) => renderList(data, index, inputArray, outputArray)}