title: Multi search filter using hooks with ReactJs
body: <p>I have a search filter for each column of my Table, using Hooks in ReactJs, but I get an error like-</p>
  
  <blockquote>
    <p>Cannot read property 'toLowerCase' of undefined</p>
  </blockquote>
  
  <p>When I type in the <code>TextField</code>.</p>
  
  <p>Would anyone know where this error came from?</p>
  
  <p><strong>Here is my code:</strong> </p>
  
  <pre><code>function FournisseursTable(props) {
  
    const classes = useStyles();
    const dispatch = useDispatch();
    const fournisseurs = useSelector(
      ({ fournisseursApp }) =&gt; fournisseursApp.fournisseurs.data
    );
    const [selected, setSelected] = useState([]);
    const [data, setData] = useState(fournisseurs);
    const [page, setPage] = useState(0);
    const [rowsPerPage, setRowsPerPage] = useState(10);
    const [order, setOrder] = useState({
      direction: "asc",
      id: null
    });
  
  const [searchTerm, setSearchTerm] = React.useState("");
  
    const handleChangeSearch = e =&gt; {
      setSearchTerm(e.target.value);
    };
  
    useEffect(() =&gt; {
      dispatch(Actions.getFournisseurs());
    }, [dispatch]);
  
    useEffect(() =&gt; {
      setData(
        searchTerm.length === 0
          ? fournisseurs
          : fournisseurs.filter(fournisseur =&gt; {
            const filtersKeys = Object.keys(searchTerm);
            const hasCorrespondences = filtersKeys.map( key =&gt; 
             fournisseur[key].toLowerCase().includes(searchTerm[key].toLowerCase())).every(curVal=&gt; !!curVal);
              return hasCorrespondences;
            })
      );
    }, [fournisseurs, searchTerm]);
  </code></pre>
  
  <p><strong>And the <code>TableCell</code> with the <code>TextField</code>:</strong></p>
  
  <pre><code>&lt;TableCell className={classes.headerTableCell} &gt;
   &lt;Tooltip className="w-full" title="Sort" enterDelay={100}&gt;
    &lt;TableSortLabel
     className="w-full"
     direction={order.direction}
    &gt;
     Code fournisseur
    &lt;/TableSortLabel&gt;
   &lt;/Tooltip&gt;
   &lt;TextField
    margin="dense"
    InputProps={{ className: classes.inputSearch }}
    className={classes.rootSearch}
    label="Rechercher"
    name="Recherche"
    variant="outlined"
    fullWidth
    onChange={handleChangeSearch}
   /&gt;
  &lt;/TableCell&gt;
  </code></pre>
  
  <p>Thanks</p>
  
  <p><strong>EDIT (for the code to work):</strong></p>
  
  <p>Modification of <code>handleChangeSearch</code>:</p>
  
  <pre><code>const handleChangeSearch = type =&gt; (e) =&gt; {
  
      const newSearchTerm = {
        ...searchTerm,
        [type]:e.target.value
      }
      if(e.target.value === ""){
        delete newSearchTerm[type]
      }
      setSearchTerm(newSearchTerm);
    };
  </code></pre>
  
  <p>And modification of <code>useEffect</code> :</p>
  
  <pre><code>useEffect(() =&gt; {
      const filtersKeys = Object.keys(searchTerm);
      setData(
        filtersKeys.length === 0
          ? fournisseurs
          : fournisseurs.filter(fournisseur =&gt; {
              const hasCorrespondences = filtersKeys
              .map( key =&gt; fournisseur[key].toLowerCase().includes(searchTerm[key].toLowerCase()))
              .every(curVal=&gt; !!curVal);
              return hasCorrespondences;
            })
      );
    }, [fournisseurs, searchTerm]);
  </code></pre>
  
  <p>And finally, call <code>onChange={handleChangeSearch("codeFournisseur")}</code> in the <code>TextField</code></p>