react-search box -> Functionality not working while calling the map function - reactjs

Question

import React, { useState } from "react";
import "./styles.css";
import Heading from "../src/components/Heading";
import Info from "./Info";
import Card from "../src/components/Cards";
function createCard(Info) {
return <Card key={Info.id} name={Info.name} />;
}
function App() {
const [search, setSearch] = useState("");
const findperson = Info.filter( personName=> {
return personName.name.toLowerCase().includes(search.toLowerCase);
});
return (
<div>
<Heading />
<input
type="text"
placeholder="Search"
onChange={event => setSearch(event.target.value)}
/>
{findperson.map(createCard)}
</div>
);
}
export default App;
-----------------------------------------------------------------------------------------
Array info.js
const Info = [
{
id: 1,
name: "Rahul"
},
{
id: 2,
name: "Rohan"
},
{
id: 3,
name: "rajesh"
}
];
export default Info;
I am trying to make a search-box that fetches data from an array (info) and then filters the data , However while calling the map function my code is breaking and i am not able to display any data ,
console log for findPerson

Answer 1

You are not calling toLowerCase, instead you are passing the function itself.
const findperson = Info.filter( personName=> {
// return personName.name.toLowerCase().includes(search.toLowerCase);
return personName.name.toLowerCase().includes(search.toLowerCase()); // <-- () missing
});

Answer 2

I have a hard time trying to understand where the issue is because i cant really debug, but here is a working example as demonstration on how i would do it, maybe that helps.
import React, { useState, useMemo } from "react";
const items = [
{
id: 1,
name: "Hamilton"
},
{
id: 2,
name: "Bruce"
}
];
const Item = ({ name, id }) => {
return <div>{name}</div>;
}
export default function App() {
const [search, setSearch] = useState("");
const filteredItems = useMemo(() => {
return items.filter(i => search === "" || i.name.toLowerCase().includes(search.toLowerCase()))
}, [search]);
return (
<div className="App">
<input value={search} onChange={ e => setSearch(e.target.value)} />
{
filteredItems.map(Item)
}
</div>
);
}