Functional Programming Patterns With RamdaJS!/

...

/

Getting the Input Value

Getting the Input Value

Using Ramda to get and trim the input's text value, setting a default if nothing's passed. (5 min. read)

We'll cover the following...

Here’s the initial app.

widget

To capture the user’s input as they type, our input element needs an event listener.

Your src/index.js file is already hooked up and ready to go. You’ll notice we imported Bootstrap for styling.

widget

Let’s add a dummy event listener to get things going.

Press + to interact
import 'bootstrap/dist/css/bootstrap.min.css';
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', console.log);

This console.logs whatever you type. You can find the logs in DevTools of course.

widget

You probably know that the standard way to access an input's value is through event.target.value. Let’s edit the event handler to log it out.

Press + to interact
import 'bootstrap/dist/css/bootstrap.min.css';
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', event => {
  console.log('value:', event.target.value);
});

Now it shows the value.

widget

How can Ramda help us achieve the following?

  • Grab event.target.value
  • Trim the output (strip leading/trailing whitespace)
  • Default to empty string if undefined

The pathOr function can actually handle the first and third bullet points. It takes three parameters: the default, the path, and the data.

So the following works perfectly

Press + to interact
import { pathOr } from 'ramda';
const getInputValue = pathOr('', ['target', 'value']);

If event.target.value is undefined, we’ll get an empty string back!

Ramda also has a trim function, so that solves our whitespace issue.

Press + to interact
import { pathOr, trim } from 'ramda';
const getInputValue = (event) => trim(pathOr('', ['target', 'value'], event));

Oh come on, we know better…let’s combine them with pipe!

Press + to interact
import { pathOr, pipe, trim } from 'ramda';
const getInputValue = pipe(
  pathOr('', ['target', 'value']),
  trim
);

We now have a mini pipeline that takes an event object, grabs its target.value, defaults to '', and trims it.

Beautiful.

I recommend storing this in a separate file.

Press + to interact
index.js
getInputValue.js
import { pathOr, pipe, trim } from 'ramda';
export default pipe(
  pathOr('', ['target', 'value']),
  trim
);