- The first reason for using it is that it is open source
- Updates happen frequently. There is constant news
- Easy to use. Files are sorted for more information content/filestructure.yml
- We usually use CSS. No frameworks and support packages
- Fast loading and fast action
Input without result, searched
Input with list
Input With Searched
The example below ensures that all items in JSON are retrieved and sorted by search. You will notice a strange removeItem pointer performing a deletion of an item in JSON. Depending on which one the user chooses to search. react-search is not a framework nor a package it is a simple code that helps you not to rewrite the same code several times in different projects
{
renderData.length > 0 && (
<div className="container-searchList">
{renderData
.filter((val) => {
if (val.title.toLowerCase().includes(input.toLowerCase())) {
return val;
}
})
.map((item) => {
const { id } = item;
return (
<>
<SearchChildList {...item} removeItem={() => removeItem(id)} />
</>
);
})}
</div>
);
}The example below ensures that all items in JSON are retrieved and sorted by search. You will notice a strange removeItem pointer performing a deletion of an item in JSON. Depending on which one the user chooses to search. react-search is not a framework nor a package it is a simple code that helps you not to rewrite the same code several times in different projects
In the example below we will process a popup and we will indicate that it will process the photo, name, and ID. Hopefully the code is very easy to write and easy to modify and is built entirely on the 2 useState method. Which handles the entire code.
<div className="content-searchList" key={id}>
<div className="flex">
<img src={image} alt={title} className="content-image-searchList" />
<p className="mleft">{title}</p>
</div>
<div>
<button className="close-btn" onClick={removeItem}>
×
</button>
</div>
</div>