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 }) => (    
     
        
      
        onBtnClick('red', selectedBox)}/>        
       
         onBtnClick('green', selectedBox)}/>    
       
      
     
);

 

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

 

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