'React/ Redux project is working fine for windows users but not myself a mac user, is it the code or my OS?
React/ Redux project is working fine for Windows users but not myself a mac user, is it the code or my OS?
This project involves creating a basic site with login logout functionality and utilizes req/res for data for users.
Error shown when I try npm start on the project
./src/components/component-users/Users.js 39:27
Module parse failed: Unexpected token (39:27)
You may need an appropriate loader to handle this file type.
|
| var returnFilteredUsers = function returnFilteredUsers() {
> var filterUser = users?.filter(function (user) {
| return user.email.toLowerCase().includes(searchInput.toLowerCase());
| });
Below is the file it is referring to
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchUsers } from '../../features/usersSlice';
//components
import User from './User';
import LogOut from '../component-login-logout/LogOut';
//css
import '../../styles/users.css';
export default function Users() {
//redux-related
const dispatch = useDispatch();
const users = useSelector((state) => state.users.users);
const status = useSelector((state) => state.users.status);
//searc states
const [searchInput, setSeacrhInput] = React.useState('');
const [filteredUsers, setFilteredUsers] = React.useState([]);
//useEffect
React.useEffect(() => {
if (status === 'idle') dispatch(fetchUsers());
}, [dispatch, status]);
//filtering users [using an input]
const returnFilteredUsers = () => {
const filterUser = users?.filter((user) =>
user.email.toLowerCase().includes(searchInput.toLowerCase())
);
setFilteredUsers(filterUser);
};
//useEffect
React.useEffect(() => {
returnFilteredUsers();
}, [searchInput, users]);
//render logout
const renderLogout = () => {
return <LogOut />;
};
//rendering search bar
const renderSearch = () => {
return (
<>
<button disabled>search</button>
<input
type='text'
value={searchInput}
onChange={(e) => setSeacrhInput(e.target.value)}
placeholder='e.g [email protected]'
/>
</>
);
};
//rendering users
const renderUsers = () => {
return !filteredUsers || filteredUsers.length === 0 ? (
<h1 style={{ textAlign: 'center' }}>Users not found ...</h1>
) : (
filteredUsers?.map((user, idx) => <User key={idx} {...user} />)
);
};
return (
<main className='users-container'>
<section>
<article>{renderLogout()}</article>
</section>
<section>
<article className='render-search'>{renderSearch()}</article>
</section>
<section>
<article className='render-users'>{renderUsers()}</article>
</section>
</main>
);
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
