I am stuck in a problem where i am implementing a search field in which a user can type into multiple field and it will give results depending on those results i.e Name, email etc.

Data object:

[
  {
   name:lorem,
   email:lorem@example.com
  }
]

Suppose there are two search fields one for name and other for email, and if user type in both fields or one field, it should return an array with matching properties.

i.e 
searchInput ={
   name:Lorem,
   email:lorem@example.com
}

result:
   [
      {
       name:lorem,
       email:lorem@example.com
      }
    ]

i am storing the input values like this

const [searchInput, setSearchInput] = useState<any>({});
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    setSearchInput({ ...searchInput, [name]: value });
  };

<input type="text" onChange={handleChange} name="email">Name</input>

I have tried multiple answer here but so far not getting the results that i want.

I have solved the search issues but now i am facing this. ******** Another Issue ********

const [users, setUsers] = useState<any>([...])
 const tempArr = [...users];
    const data = tempArr.filter((e: any) =>
      Object.keys(e).some(
        (key) =>
          e[key] &&
          searchInput[key] &&
          e[key]
            .toString()
            .toLowerCase()
            .includes(searchInput[key].toLowerCase())
      )
    );

    if (data.length) {
      setUsers(data);
    }

so the search is working as expected but now i am losing the original data and i have to reload the page to get the original data. so is there any way to filter the data without losing the original data.

Solution:

const [searchInput, setSearchInput] = useState<any>(null); // change initial state to null

// Fetch the data if searchInput is null
useEffect(() => {
    if (!searchInput) {
       // Make the api call to fetch data
    }
  }, [searchInput]);

  //   Changes in input handler
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;

    if (!!value) {
      setSearchInput({ ...searchInput, [name]: value });
    } else {
      setSearchInput(null); // set null if there isn't any search input.
    }
  };

The search function stays the same.