please any help!
I create a simple code to filter items based on an input value but I got an ERROR :( even though am sure I did everything correctly following the same steps in the tutorial https://youtu.be/cahFm8eeeJI?list=PL6bwFJ82M6FXjyBTVi6WSCWin8q_g_8RR&t=1160
This is the Whole code pages/index.js
import React, {useState} from 'react'
const List = ({items}) => {
const [filtredItems, setFiltredItems] = useState(items)
const filterItems = (e) => {
const searchValue = e.target.value
const currentItems = [...items]
const matchingItems = currentItems.filter((item)=> item.includes(searchValue))
setFiltredItems(matchingItems)
}
return (
<>
<input onChanged={filterItems}/>
<ul>
{/* <li>React JS</li>
<li>Next JS</li>
<li>Javascript</li> */}
{filtredItems.map((item)=>(
<li key={item}>{item}</li>
))}
</ul>
</>
)
}
const ListContainer = () => {
return (
<List items={'ReactJS', 'NextJS', 'Javascript'}/>
)
}
export default ListContainer
output>>>>
TypeError: filtredItems.map is not a function enter image description here
Thank you.
items={'ReactJS', 'NextJS', 'Javascript'} should be items={['ReactJS', 'NextJS', 'Javascript']} so you're passing an array. Without the [], you're just using the comma operator to pass the string "Javascript" as items.
Separately, though, it's problematic to copy props into state the way you are in that component. If the parent passes new items to the child component, it won't see them until/unless the user filters again, because items is only used as the initial value of filtredItems (sic).
Instead, keep track of the search value and do the filtering when either items or searchValue changes:
const List = ({ items }) => {
// Remember the search value
const [searchValue, setSearchValue] = useState(null);
// Remember the current filtered items (null = not filtering)
const [filteredItems, setFilteredItems] = useState(null);
// Filter the items by search filter when either `items` or `searchValue` changes
useEffect(() => {
const matchingItems = searchValue
? items.filter((item) => item.includes(searchValue))
: items;
setFilteredItems(matchingItems);
}, [items, searchValue]);
const filterItems = (e) => {
setSearchValue(e.target.value.trim());
};
return (
<>
<input onChange={filterItems} value={searchValue} />
<ul>
{
(filteredItems ?? items).map((item) => (
<li key={item}> {item} </li>
))
}
</ul>
</>
);
};
(I also fixed a couple of typos in there, such as filtredItems => filteredItems and onChanged => onChange.)