0
119
ViewsData entry field displaying entered values
My application has a modal window with filters. I would like to add another kind of filter to it. I just don’t know how to implement it in React (perhaps you can help me with the code, recommend links).
The meaning is as follows: I want the filters to have a line in which the user could write some value on his own, press Enter, see the entered result (it is possible to enter several values by which you can filter).
Perhaps my explanation is chaotic, in addition I will provide a screenshot with the desired result:
·
Juan Pablo Isaza
2 answers
Answer question0
export function ListItem({ itemValue }) {
return (
<div className="item">
<span className="itemValue">{itemValue}</span>
</div>
);
}
export default function App() {
const [itemList, setListItem] = useState([]);
const [item, setItem] = useState("");
const addValue = (event) => {
setItem(event.target.value);
};
const listenEnter = (event) => {
if (event.key === "Enter" && event.target.value !== "") {
setListItem([...itemList, item]);
setItem("");
}
};
return (
<div className="App">
<input
className="inputElement"
placeholder="Enter Value"
value={item}
onChange={addValue}
onKeyUp={listenEnter}
/>
<div className="itemList">
{itemList.map((item) => (
<ListItem itemValue={item} />
))}
</div>
</div>
);
}
·
Juan Pablo Isaza
Report
0
For UI you can use or create a custom input field like this https://evergreen.segment.com/components/tag-input.
For implementation: Now you have fields searched by user Ex-
const list = [2,3,4,56,7,8,12,34,0,1]
const searchedItems = [3,7,8]
const finalList= [];
function searchItems() {
list.forEach(item => {
searchedItems.forEach(ele => {
if(ele===item) finalList.push(item);
})
});
return finalList;
}
console.log(searchItems())Finally use this array in your search item results.
·
Juan Pablo Isaza
Report
Answer question