Error - Rendering multiple instances in react search component - arrays

Question

I am building a search component where the user types in the value and it filters through some dummy data and renders the result for the user to see. The problem is when I type in one character in the search field i get the entire array of data on every character I type. So for example there are 4 data strings in the array so if I type in two characters in the search bar then my result is 8.
Here is the code and the problem duplicated: Any help is appreciated.

Answer 1

The answer is below, basically, the code was loading in an extra map from CompanyInfoList component. I also had a useContext that was not needed in the same component, so i removed it and replaced results.map from useContext setState hook to filtered.map. filtered was the prop that needed to be passed down from CompSearch to CompanyInfoList. The last change I made was to delete the RenderList component and remove return RenderList in the serachList component to CompanyInfoList
CompSearch.js
import React, {useContext, useState} from "react";
import CompanyInfoList from "./CompanyInfoList";
import { CompListContext } from "./CompListContext";
const CompSerach = () => {
// const [input, setInput] = useState('');
const [results, setResults] = useContext(CompListContext);
const [searchField, setSearchField] = useState("");
const [searchShow, setSearchShow] = useState(false);
const filtered = results.filter((res) => {
return (
res.name.toLowerCase().includes(searchField.toLowerCase()) ||
res.employee.toLowerCase().includes(searchField.toLowerCase()) ||
res.date.toLowerCase().includes(searchField.toLowerCase()) ||
res.amount.toLowerCase().includes(searchField.toLowerCase())
);
});
const handleChange = (e) => {
setSearchField(e.target.value);
if (e.target.value === "") {
setSearchShow(false);
} else {
setSearchShow(true);
}
};
function searchList() {
if (searchShow) {
return <CompanyInfoList filtered={filtered} />;
}
}
return (
<>
<div>
<input
type="search"
placeholder="search Company Title"
// input="input"
// value={input}
onChange={handleChange}
// onChange={handleChange}
/>
</div>
{searchList()}
</>
);
};
export default CompSerach;
CompanyInfoList.js
import Results from "./Results";
const CompanyInfoList = ({ filtered }) => {
const fltr = filtered.map((result) => (
<Results
key={result.id}
name={result.name}
employee={result.employee}
date={result.date}
amount={result.amount}
/>
));
return <div>{fltr}</div>;
};
export default CompanyInfoList;