Event handler with parameters React

Question

I have two buttons (icons). Depending on which one I click (parameter), a function should be called to change my view layout.

export default class ToolbarPictograms extends Component {
      static propTypes = {
        layout: PropTypes.string.isRequired,
        changeLayout: PropTypes.func.isRequired
      }

      constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
      }

      handleClick = value => {
        this.props.changeLayout(value)
      }

      render() {
        const changeLayout = this.props.changeLayout
        return (
          <div style={style.container}>
            <Divider />
            <div className='row end-xs'>
              <ViewListIcon onClick={() => changeLayout('list')} />
              <ViewModuleIcon onClick={() => changeLayout('modules')}/>
            </div>
            <Divider />
          </div>
        )
      }
    }

Currently I use arrow functions, it works but I have a warning: JSX props should not use arrow functions

What is the best way to do something like this in React?

Radio- · Accepted Answer · 2016-04-18 13:45:19Z

The recommended way to do this is to pass a reference to the function as a property of the subcomponents, and then have the subcomponents invoke the function with the required arguments. The reason for doing it this way is that creating functions during rendering can lead to performance problems due to increased garbage collector activity.

So, you would change your function to

render() {
        const changeLayout = this.props.changeLayout
        return (
          <div style={style.container}>
            <Divider />
            <div className='row end-xs'>
              <ViewListIcon onClick={this.props.changeLayout} />
              <ViewModuleIcon onClick={this.props.changeLayout}/>
            </div>
            <Divider />
          </div>
        )
      }

Then, in ViewListIcon and ViewModuleIcon, invoke the callbacks with appropriate arguments. These could be hard coded or passed in as more props.

Collectives™ on Stack Overflow

Event handler with parameters React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related