CODEWITHSUNDEEP
reactjs
rickandmorty
rickandmorty

Reputation: 183

Where do I add functions in React?

I'm running through several tutorials, and I don't quiet undertand where I can write/put multiline functions?

Say I needed this filter function

const filter = {
  address: 'England',
  name: 'Mark'
};
let users = [{
    name: 'John',
    email: '[email protected]',
    age: 25,
    address: 'USA'
  },
  {
    name: 'Tom',
    email: '[email protected]',
    age: 35,
    address: 'England'
  },
  {
    name: 'Mark',
    email: '[email protected]',
    age: 28,
    address: 'England'
  }
];


users= users.filter(item => {
  for (let key in filter) {
    if (item[key] === undefined || item[key] != filter[key])
      return false;
  }
  return true;
});s

Where do I put it in React? Most tutorials are focused on App.js page, and the only thing i've learned was to add code here {in brackets}:

<div>
      <h3> {1+1} </h3>
</div>

However, it doesn't make sense/looks bulky and unreadable to add the function above just inside there? Or is that the correct way? I'm currently focused on learning Javascript and frontend React only at the moment (not backend).

Upvotes: 0

Views: 1188

Answers (1)

Harshith
Harshith

Reputation: 66

Here's an example of how you could use that function in React:

  1. Define the function within the App.js file (inside the App component)
  2. Call that function inside the JSX that you're returning
const App = () => {
   const yourFunction = () => {

    users.filter(function(item) {
    for (var key in filter) {
     if (item[key] === undefined || item[key] != filter[key])
      return false;
    }
      return true;
    });

   }

   return (
   <div>
    <h1>{yourFunction()}</h1>
   </div>
   );

}

It works the same way as putting javascript inside the JSX - it just runs what's inside the tags and in this case, that means running the function outside the returning JSX.

Upvotes: 1

Related Questions