0

Is there a way of changing the following, so that I don't use the .bind(this, ... A lot of the time I usually just do this.onClickTabItem but I'm guessing when passing a parameter this can't be done? (Not 100% sure why this is)

Ideally I would like something like this.handleClick(index)

handleClick= (index) => {
  this.setState({ active: index })
}

return (
  ...
  onClick={this.handleClick.bind(this,index)}
  ...
)

Below is how I render

getContent() {
  const { ... } = this.props;

return (
  <Styled1>
    {tabs.map((tab, index) => {
      return (
        <Styled2
           ...
           ...
           onClick={this.handleClick.bind(this,index)}
         >
           ...
         </Styled2>
       )
     })}
  </Styled1>
 );
}

render() {
  return (
    {this.getContent(()}
);

}

zeduke
  • 120
  • 2
  • 12
  • Can you show us how you render those items which have `onClick` method? – devserkan Oct 20 '18 at 22:38
  • Sure, just added the information now – zeduke Oct 20 '18 at 22:51
  • @zeduke doesn't your question relate to this https://stackoverflow.com/questions/52788613/react-js-the-most-efficient-way-to-pass-a-parameter-to-an-event-handler-without? – philip_nunoo Oct 20 '18 at 22:54
  • Since your question has been closed I can't provide an answer anymore. But, do not use the accepted answer in the duplicate question. It's not different using a `bind`. What can I suggest you here, pass the `index` to `Styled2` component and use it there with another callback handler with its reference. So, you can invoke the `onClick` handler within this new handler. Or you can use this `index` in the element as `id` and use it from `event.target.id` or you can use it as a dataset like `data-index` and use it in the handler as `event.target.dataset.index`. – devserkan Oct 20 '18 at 22:57

0 Answers0