I have troubles creating a searchbar

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;
    }, [dispatch, isError, message])
    const [user, setUser] = useState(allUser);
    const [currentPage, setCurrentPage] = useState(1);
    const [searchValue, setSearchValue] = useState("");

    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("searchvalue was changed")
    }, [searchValue])
        return <Spinner/>
  return (
        <Search callback={(searchValue:string)=>setSearchValue(searchValue)}/>
                            <tr key={item._id}>
                                <td id="btn"><button><Link to={`/showUser/${item._id}`} className="link" style={{color:"var(--white)", display:"block"}}>Benutzer anzeigen</Link></button></td>

Code search:

const Search = (props:{callback:Function}) => {
    const [innerValue, setInnerValue]= useState("");
    const onSubmit = (e:React.FormEvent)=>{
  return (
        <SearchForm onSubmit={onSubmit}>
            <SearchInput type="text" name="search" id="search" placeholder='Suche' defaultValue={innerValue} onChange={(e)=>setInnerValue(e.target.value)}/>

Thanks for help.
Best Roman

Once again a thinking fault. I thoughed I have to filter the strings out of the user, so I have set a filter for every possibility. But I only must convert the object into a string using the join method. The following way from Nishant Kumar(free code camp) brought the solution:

 const filteredUser = user.filter((item) => {
            return Object.values(item).join('').toLowerCase().includes(searchValue.toLowerCase())

Hope that helps someone other, who has problems with that.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.