How to export functions and make them reusable in javascript / reactjs

Question

I have a piece of code where I use it almost in all my components and is working perfectly fine but I would like to make it reusable.

I tried to export it in a different file then imported and pass the arguments on the function but it didn't work.

The searchTerm is simply an input where I set the state to the value of the input.

const data = [
  {
    name: "User"
    email: "[email protected]"
    phone: 0000000
    gender: "male"
    notes: "some notes"
    birthday: "00/00/0000"
  }
]

What I have and want to reuse:

let filteredData = []

if (clients.length > 0) {
  filteredData =
    data.filter(d=> Object.values(d).join(' 
    ').toLowerCase().match(searchTerm.toLowerCase()))
}

What I tried:

export function tableFilter(data, searchTerm) {
  if (data.length > 0) {
    return data.filter(d => Object.values(d).join(' 
    ').toLowerCase().match(searchTerm.toLowerCase()))
  }
}

The expected result's are to use the function in all my components without rewriting it. What I am getting now is no data at all.

@EriksKlotins I mean I cannot filter the data and I cannot see the full list of the data. — PanosCool
– PanosCool, Commented Aug 29, 2019 at 7:13
You can remove the 0 check because filter will just return an empty array if the data is empty. — Domino987
– Domino987, Commented Aug 29, 2019 at 7:35

Treycos · Accepted Answer · 2019-08-29 07:45:52Z

2

The solution it was very simple :

export function tableFilter(data, searchTerm) {
  let filteredData = []
  // the if check is not necessary 
  if (data.length > 0) {
    filteredData = data.filter(d => Object.values(d).join(' 
    ').toLowerCase().match(searchTerm.toLowerCase()))
  }
  return filteredData
}

edited Aug 29, 2019 at 7:45

Treycos

7,4913 gold badges29 silver badges53 bronze badges

answered Aug 29, 2019 at 7:40

PanosCool

1854 silver badges16 bronze badges

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

Comments

Tiisetso Tjabane · Accepted Answer · 2019-08-29 08:40:12Z

0

Why not create the function in the root component and pass it to all the child components that use the functionality.

class App extends React.Component {
  tableFilter(data, searchTerm) {
      if (data.length > 0) {
         return data.filter(d => Object.values(d).join('')
                                            .toLowerCase()
                                            .match(searchTerm.toLowerCase()))
       }
  }
  render() {
    return (<div>
             <Child1 myfilter={this.tableFilter} />
             <Child2 myfilter={this.tableFilter} />
             <Child3 myfilter={this.tableFilter} />
             <Child4 myfilter={this.tableFilter} />
             ...
           </div>);
  }
}

edited Aug 29, 2019 at 8:40

answered Aug 29, 2019 at 8:33

Tiisetso Tjabane

2,1062 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to export functions and make them reusable in javascript / reactjs

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related