Where do I add functions in React? - reactjs

Question

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: 'johnson#mail.com',
age: 25,
address: 'USA'
},
{
name: 'Tom',
email: 'tom#mail.com',
age: 35,
address: 'England'
},
{
name: 'Mark',
email: 'mark#mail.com',
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).

Answer 1

Here's an example of how you could use that function in React:
Define the function within the App.js file (inside the App component)
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.