React - How to create Chained Cascading Helper Functions

Question

How could I chain helper methods in React?

I have a helper.js file with helper functions.

ie: (ps: bellow are just mundane methods to illustrate my issue for now)

//helper.js

export function handleLog(arg) {
  return console.log(`App current state is: ${arg}`);
}

export function handleSlice(arr) {
  return arr.slice(1, 2);
}

export function handleShuffle(arr) {
  return arr.sort(() => Math.random() - 0.5);
}

I'm able to apply the methods to my React app as:

import { handleLog, handleSlice, handleShuffle } from "./helpers";
...

class Heros extends PureComponent {
  constructor() {
    super();
    this.state = {
      heros: ["Hulk", "Thor", "Aquaman", "Stan Lee"]
    };
  }

  render() {
    const { heros } = this.state;
    const shuffledheros = handleShuffle(heros);
    const strongestHero = handleSlice(shuffledheros);
    handleLog(heros);

    /* How could I chain 👇 */
    // const strongestHero = handleShuffle(heros).handleSlice(heros);

    return (
      <>
        <h1>Chained Helpers</h1>
        Strongest: {strongestHero}
      </>
    );
  }
}

How could I chain ie: handleShuffle(heros).handleSlice(heros) and so on?

When chaining the second method it throws: (0 , _helpers.handleSlice)(...).handleSlice is not a function

I've unsuccessfully attempted refactoring the helpers to:

const helpers = {
 f1() { ...do something...; return this;},
 f2() { ...do something...; return this;}
}
export default helpers

That didn't work either. Here is the full code

Akrion · Accepted Answer · 2018-11-19 03:18:48Z

2

You could create a custom class which can hold an array as an internal property to achieve this:

class arrayUtils {
  constructor(items = []) {
    this._data = items;
  }
  reverseIt() {
    this._data.sort((a, b) => b - a)
    return this
  }
  getfirstTwo() {
    this._data.splice(0, 2)
    return this
  }
  printIt() {
    console.log('printing:', this._data)
    return this
  }
  get value() {
    return this._data
  }
}

// Create the instance
var arr = new arrayUtils([1, 2, 3, 4, 5])

// Chain subsequent calls (since we return `this`)
console.log('chain:', arr.reverseIt().printIt().getfirstTwo().printIt())

// get the value
console.log('value:', arr.value)

You can see it working here

Specifically to React you can have this in a separate class in a separate util file and simply export default it:

class helpers ...

export default helpers

then import and create an instance:

import helper from './helper';

// Create the instance
var arr = new helper([1, 2, 3, 4, 5])

edited Nov 19, 2018 at 3:18

answered Nov 19, 2018 at 3:03

Akrion

18.6k1 gold badge38 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Null isTrue Over a year ago

Could you pls show me how this approach would be wired to React?

Akrion Over a year ago

Sure see the attached link to the answer.

Null isTrue Over a year ago

Thank you! This is interesting and a brand new territory to me. I'm still raw on OOP paradigms.

indapublic · Accepted Answer · 2018-11-19 02:26:36Z

1

First: Array.sort doesn't return any array.

You should rewrite your function handleShuffle

export function handleShuffle(arr) {
  return arr.concat().sort(() => Math.random() - 0.5);
}

Second: you try to call array functions, but Array doesn't contain any handleShuffle or handleSplice functions. So you should run function by function:

const strongestHero = handleShuffle(handleSlice(heros));

Your forked example

edited Nov 19, 2018 at 2:26

answered Nov 19, 2018 at 2:18

indapublic

2,34810 gold badges40 silver badges51 bronze badges

11 Comments

Null isTrue Over a year ago

The provided fork does not execute handleShuffle only handleSlice. I'm also confused about why the need for concat ? My shuffling method is working I just can't chain them together.

indapublic Over a year ago

we need concat because sort function is not return anything. I gived link for explanation

indapublic Over a year ago

handleShuffle(handleSlice(heros)); I executed two function step by step

Null isTrue Over a year ago

the issue is that your suggestion isn't shuffling the array. It only returns the same value on each page reload.

indapublic Over a year ago

Because I'm slice array first and shuffle array with 1 element

|

indapublic · Accepted Answer · 2018-11-19 03:01:52Z

0

Another solution: create Array prototype's methods:

Array.prototype.handleSlice = function() {
    return this.slice(1, 2);
};

Array.prototype.handleShuffle = function() {
    return this.concat().sort(() => Math.random() - 0.5);
};

So you can execute your methods as cascade.

heros.handleShuffle().handleSlice();

But I'm think that Array extending for those simple functions is not best idea.

answered Nov 19, 2018 at 3:01

indapublic

2,34810 gold badges40 silver badges51 bronze badges

Collectives™ on Stack Overflow

React - How to create Chained Cascading Helper Functions

3 Answers 3

3 Comments

11 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related