How to pass a value to onClick event handler in React.js

The problem

If you ever tried to pass a parameter to onClick event handler, you know that it is not straightforward.

If you didn’t, here is why may want to. Imagine a scenario where you have a group of three buttons. When you click on one of them, you want to know which one was clicked and perform an appropriate action. You have a choice of creating three onClick event handlers, one for each button, or one hander for all the buttons and pass a parameter identifying the clicked button into it. Which option do you choose? Clearly writing one handler should be less work, right?

Unfortunately, passing a parameter into an event handler in React is not straightforward. If it were, there wouldn’t be multi-page discussions about just that. By the way, the accepted answer on that Stackoverflow thread lists an “Easy way” along with “Better way” and an “Old easy way”. The “Easy way” is indeed easier, but has a performance impact. And a “Better way” is in fact not that easy. Is that confusing, or is that just me?

However, don’t despair! I will show you how you can pass not even one, but multiple parameters into an onClick event handler. In fact, you can apply the same technique to any React event handler. That approach is both easy to implement and has no performance impact.

Read more →

Why I want an autopilot in my racing drone

About a year ago Hobbyking was having one of their “Flash Sale” events. During a few days, they dropped prices on a few hundred items. An online shopaholic in me couldn’t miss it. I meticulously studied the offerings until I found something worthy of my attention and money. That was a Jumper 218 Pro racing quadcopter, almost ready to run. A bargain at a just a bit over $100! I just needed to add an RC receiver.

Jumper 218 Pro Quadcopter

Jumper 218 Pro Quadcopter | Source: hobbyking.com

I received it a few days later and, as it often happens, put it on a shelf for a few months. From time to time I would take it off the shelf, hold it in my hands, make a few plans for it, and then put it back. At the time I was still concentrating on building my Alien 560 quadcopter, and the smaller drone was a distraction. The “project Alien” appeared to be never-ending. Every time I flew it, I saw a way to improve it. I would disassemble the copter and work on it for a week or two. Then put it back together, fly it, and then dismantle again. Only when I crashed the Alien, I decided to take a break from it and turned my attention to the Jumper.

Read more →

Mocking ES6 module dependencies with proxyquire

In part one, I wrote about mocking ES6 module dependencies using the ES6 native import * from construct. It works mostly fine. However, you need to be aware of a potential issue:

  • You need to import modules to mock them, which means that those modules will be evaluated. That may be a problem if you don’t want the code in this modules to be executed.

Another method I found to work well is using proxyquire.  It is one of many libraries aiming to streamline mocking dependencies to simplify unit testing.

Read more →