Hello everyone, I am creating a searchbar for my mern-stack. I get the correct value out of my inputfield. And it changes correctly when I type something in. I try now to filter my user, but when the site loads the log shows me both users out of my array. That should not be. I think it should be empty on pageload. When I refresh the site the userlist is gone, but I get no error. When I switch to another site and go back, the userlist is there again.
Code User:
const User = () => {
const dispatch = useAppDispatch();
const selector = useAppSelector((state:RootState)=>state.user);
const {allUser, isError, isLoading, message} = selector;
useEffect(()=>{
if(isError){
toast.error(message);
}
dispatch(getAllUser())
}, [dispatch, isError, message])
const [user, setUser] = useState(allUser);
//pagination
const [currentPage, setCurrentPage] = useState(1);
//search
const [searchValue, setSearchValue] = useState("");
console.log("searchvalue",searchValue)
const filteredUser = useMemo(()=>user.filter((item)=>item.vorname.toLowerCase().includes(searchValue.toLowerCase()) || item.nachname.toLowerCase().includes(searchValue.toLowerCase()) || item.email.toLowerCase().includes(searchValue.toLowerCase()) || item.city.toLowerCase().includes(searchValue.toLowerCase()) || item._id!.toLowerCase().includes(searchValue.toLowerCase())),[searchValue, user])
console.log(filteredUser);
useEffect(()=>{
console.log("searchvalue was changed")
}, [searchValue])
if(isLoading){
return <Spinner/>
}
return (
<Container>
<Search callback={(searchValue:string)=>setSearchValue(searchValue)}/>
<Table>
<thead>
<tr>
<th>Kundenname</th>
<th>Email</th>
<th>Kundennummer</th>
<th>Stadt</th>
<th>Umsatz</th>
<th>Kundendaten</th>
</tr>
</thead>
<tbody>
{user.map((item)=>(
<tr key={item._id}>
<td>{item.nachname}</td>
<td>{item.email}</td>
<td>{item._id}</td>
<td>{item.city}</td>
<td>Placeholder</td>
<td id="btn"><button><Link to={`/showUser/${item._id}`} className="link" style={{color:"var(--white)", display:"block"}}>Benutzer anzeigen</Link></button></td>
</tr>
))}
</tbody>
</Table>
Code search:
const Search = (props:{callback:Function}) => {
const [innerValue, setInnerValue]= useState("");
const onSubmit = (e:React.FormEvent)=>{
e.preventDefault();
props.callback(innerValue);
}
return (
<Container>
<FormWrapper>
<SearchForm onSubmit={onSubmit}>
<SearchInput type="text" name="search" id="search" placeholder='Suche' defaultValue={innerValue} onChange={(e)=>setInnerValue(e.target.value)}/>
<SearchButton>Go</SearchButton>
</SearchForm>
</FormWrapper>
</Container>
)
}
Thanks for help.
Best Roman