Nice tutorial :) One comment - you don't really need to set the filtered results on the state in this case. I'd just filter the people according to the search term during render:
In this case setState will cause a re-render so the component will be rendered with the new value of filter, which is then applied to the filtered array before displaying the final results.
I still think useEffect is a better approach (readable, maintainable), because calculating search in reality will be a side effect and could be left asynchronous, and not block rendering. When the search calculation is complete, by setting state we can trigger a re-render with the search results instead of blocking rendering, during the typing of a search term.
The functional component itself is the render function, I prefer to leave it as it is and use helper functions to perform side effects. But this is just my opinion, what do you think?
The two approaches are functionally similar. The main difference is that with useEffect approach you introduce extra unnecessary code, plus saving unnecessary values to the state, which can be derived at render time. This is similar to the discussion of storing derived data onto the state.
It's not that useEffect approach is wrong here, it's just that it can be simplified :)
Hi Alex.. Can you make a component in react functional hooks which has sort, filter & search feature using your method?
The final result should be a single element which can be mapped to show the cards accordingly and It should not alter the existing data in the array but re-arrange/show accordingly.
I have a sample data as below:
const data = [
{
_id: "dress1",
image: "/images/fans.jpg",
title: "shirt",
description:
"This is for all the latest trends, no matter who you are, where youβre from and what
youβre up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
availableSizes: ["X", "L", "XL", "XXL"],
price: 29.9584
},
{
_id: "dress2",
image: "/images/mcb.jpg",
title: "Pants",
description:
"This is for all the latest trends, no matter who you are, where youβre from and what youβre up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
availableSizes: ["X", "M", "L"],
price: 18.78
}];
when I m try iterate array object data cause some error will you explain why this error and how to solve this
screenshots... dev-to-uploads.s3.amazonaws.com/i/...
this is my code link please check ...
my problem is I m using a search filter method to the search box if anybody searches note list
note data search but the problem is if I remove text my search filter my added data old data not
show only filter data show... if you see my code and add some note and filter you will better understand
what I m try to say
Thank you, that was really helpful! One quastion: do you know how to make the search accept two seach parameters? like i want to search base on the name and also the address?
I think it'd be const results = !searchTerm && !searchTerm2 instead of || otherwise the filtering will be applied only of both search terms are present.
i came up with this solution and it works now but only if one of the conditions is true. I want to make the method filter the two conditions in the same time. So like i want to know all the people that their name is Alex and lives in New york
Nice tutorial :) One comment - you don't really need to set the filtered results on the state in this case. I'd just filter the people according to the search term during render:
Here's a sandbox.
Thanks for sharing your knowledge.
Since setState is asynchronous isnβt it better to use useEffect to handle this side effect? Please explain if Iβm wrong here.
In this case
setState
will cause a re-render so the component will be rendered with the new value of filter, which is then applied to the filtered array before displaying the final results.I still think
useEffect
is a better approach (readable, maintainable), because calculating search in reality will be a side effect and could be left asynchronous, and not block rendering. When the search calculation is complete, by setting state we can trigger a re-render with the search results instead of blocking rendering, during the typing of a search term.The functional component itself is the
render
function, I prefer to leave it as it is and use helper functions to perform side effects. But this is just my opinion, what do you think?The two approaches are functionally similar. The main difference is that with
useEffect
approach you introduce extra unnecessary code, plus saving unnecessary values to the state, which can be derived at render time. This is similar to the discussion of storing derived data onto the state.It's not that
useEffect
approach is wrong here, it's just that it can be simplified :)Got it, I'm learning a lot about React from this conversation. Thank you for the link :')
Sure thing! :) I also wrote an article about some of the common mistakes with React:
The most common mistakes when using React
Alex K. γ» Sep 11 '19 γ» 5 min read
Hi Alex.. Can you make a component in react functional hooks which has sort, filter & search feature using your method?
The final result should be a single element which can be mapped to show the cards accordingly and It should not alter the existing data in the array but re-arrange/show accordingly.
I have a sample data as below:
const data = [
{
_id: "dress1",
image: "/images/fans.jpg",
title: "shirt",
description:
"This is for all the latest trends, no matter who you are, where youβre from and what
youβre up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
availableSizes: ["X", "L", "XL", "XXL"],
price: 29.9584
},
{
_id: "dress2",
image: "/images/mcb.jpg",
title: "Pants",
description:
"This is for all the latest trends, no matter who you are, where youβre from and what youβre up to. Exclusive to ASOS, our universal brand is here for you, and comes in all our fit ranges: ASOS Curve, Tall, Petite and Maternity. Created by us, styled by you.",
availableSizes: ["X", "M", "L"],
price: 18.78
}];
i m facing problem this type data filterting
when I m try iterate array object data cause some error will you explain why this error and how to solve this
screenshots...
dev-to-uploads.s3.amazonaws.com/i/...
dev-to-uploads.s3.amazonaws.com/i/...
dev-to-uploads.s3.amazonaws.com/i/...
Hi, the
name
property in the first object of the array is a number, which doesn't have string methods such astoLowerCase()
. Make sure it is a string.dev.to/amitdotcode/search-box-filt...
please solved my this problm
this is my code link please check ...
my problem is I m using a search filter method to the search box if anybody searches note list
note data search but the problem is if I remove text my search filter my added data old data not
show only filter data show... if you see my code and add some note and filter you will better understand
what I m try to say
link here......
codesandbox.io/s/unruffled-bose-tk...
how to handle this type functionality and data please reply me I share you screenshots
how to use this array instead of people
const searchData = [
{
urlName: "bb",
linkurl: "/bb",
},
{
urlName: "aa",
linkurl: "/aa",
},
{
urlName: "ea",
linkurl: "/ee",
},
{
urlName: "d s",
linkurl: "/dd",
},
];
Thank you, that was really helpful! One quastion: do you know how to make the search accept two seach parameters? like i want to search base on the name and also the address?
This what i tried, and failed :(
I think it'd be
const results = !searchTerm && !searchTerm2
instead of||
otherwise the filtering will be applied only of both search terms are present.i came up with this solution and it works now but only if one of the conditions is true. I want to make the method filter the two conditions in the same time. So like i want to know all the people that their name is Alex and lives in New york
For your specific case you can do like this:
However, note that the filter won't be applied unless both search terms are present.
Yah but that is exactly what i don't want. I want that the user can choose one of the filters or both of them in the sametime
Hello! In the end you found the solution?