[React] Pass Data To Event Handlers with Partial Function Application

In this lesson we’ll see how to pass an item’s id value in an event handler and get the state to reflect our change. We’ll also create a helper function that allows us to use partial function application to clean up the event handler code and make it more “functional”

 

Previous code:

const ActionBtns = ({ selectedBox, onBtnClick }) => (
    <nav className={classnames('nav')}>
        <RaisedButton
            label="Red"
            style={style}
            onClick={() => onBtnClick('red', selectedBox)}/>
        <RaisedButton
            label="Green"
            style={style}
            onClick={() => onBtnClick('green', selectedBox)}/>
    </nav>
);

 

We want to change the highlight code to partial applied function:

const ActionBtns = ({ selectedBox, onBtnClick }) => {
    const setGreenColor = partial(onBtnClick, 'green', selectedBox);
    const setRedColor = partial(onBtnClick, 'red', selectedBox);
    return (
        <nav className={classnames('nav')}>
            <RaisedButton
                label="Red"
                style={style}
                onClick={setRedColor}/>
            <RaisedButton
                label="Green"
                style={style}
                onClick={setGreenColor}/>
        </nav>
    );
};

 

lib:

export const partial = (fn, ...args) => fn.bind(null, ...args);

 

Test:

import {partial} from '../lib/util';

const add = (a, b) => a + b;
const addThree = (a,b,c) => a + b + c;

test('partial applies the first argument ahead of time', () => {
   const inc = partial(add, 1);
   const result = inc(2);
   expect(result).toBe(3);
});

test('partial applies the multiple arguments ahead of time', () => {
   const inc = partial(addThree, 1, 2);
   const result = inc(3);
   expect(result).toBe(6);
});