[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); });