My simple app has:
In my app, a user can click and add a string to an array of filters (filters changing), then I'd like to create a new arr of objs filteredUsers, send it to users (by setUsers(filteredUsers)) and render a new list, based on filters.
When I'm using a single string, e.g. getFilteredUsers('string') it works, but I can't make it with an array.
const users = [
{
id: 849,
name: 'John',
city: 'London',
languages: ['English']
},
{
id: 294,
name: 'Ola',
city: 'Stockholm',
languages: ['Swedish', 'English']
},
{
id: 585,
name: 'Stefano',
city: 'Naples',
languages: ['Italian', 'French']
},
{
id: 946,
name: 'Anna',
city: 'Paris',
languages: ['French']
}
]
const four = document.querySelector('.four');
const arrayFilter = arr => {
const newUsers = filters.map(filter => getUsers(filter));
four.textContent = JSON.stringify(newUsers);
return newUsers
}
const test = ['French'];
console.log(arrayFilter(test))
I've also tried to use useEffect, but with no results.
jsfiddle: https://jsfiddle.net/gmp5doqv/165/
GitHub: https://github.com/lukaasz555/job-list/blob/main/components/Main/Main.tsx
Here is an example of preforming this filter using React and the array methods .some and .includes
// Get a hook function
const { useState } = React;
function App() {
const users = [
{
id: 849,
name: 'John',
city: 'London',
languages: ['English']
},
{
id: 294,
name: 'Ola',
city: 'Stockholm',
languages: ['Swedish', 'English']
},
{
id: 585,
name: 'Stefano',
city: 'Naples',
languages: ['Italian', 'French']
},
{
id: 946,
name: 'Anna',
city: 'Paris',
languages: ['French']
}
];
const languages = [
'English',
'Swedish',
'Italian',
'French'
];
const [selectedLangs, setSelectedLangs] = useState(
Object.fromEntries(languages.map(s => [s, false]))
);
function handleCheckboxClick({target}) {
const { value, checked } = target;
const selectedClone = structuredClone(selectedLangs);
const state = selectedClone[value];
selectedClone[value] = !state;
setSelectedLangs(selectedClone);
}
const selectedLangsThatAreTrue = Object.entries(selectedLangs)
.filter(([lang, val]) => val)
.map(([lang]) => lang);
const targetData = users.filter(
({languages}) =>
languages.some(lan => selectedLangsThatAreTrue.includes(lan))
);
return (
<div className="App">
Select Languages:
{
languages.map(s => (
<label key={s}> {s}
<input value={s}
onClick={handleCheckboxClick}
type="checkbox" />
</label>
))
}
<br />
{
targetData.map(({name}) => <span key={name}> {name} </span>)
}
</div>
);
};
// Render it
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
);.App label {
user-select: none;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>This is a function to check a user passes a filter :
const checkUser = (user, filter) =>
user.name === filter || user.city === filter || user.languages.includes(filter);
This is a function that check a user passes all filters :
let filters = null;
const userFilter = user => {
for(let i = 0, l = filters.length ; i < l ; i++) {
if(!checkUser(user, filters[i])) {
return false;
}
}
return true;
}
And this is how you can use it :
filters = ['French', 'Naples'];
filteredUsers = users.filter(userFilter);
// gives Stefano, the only one with French and Naples
filters = ['English'];
filteredUsers = users.filter(userFilter);
// gives John and Ola, the only ones with English
filters = [];
filteredUsers = users.filter(userFilter);
// gives everyone !
filters = ['Portuguese'];
filteredUsers = users.filter(userFilter);
// gives no one