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;
    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

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.