React hooks how search array child array

Question

I have a json file like this

{"id": 1,
   "categoryName": "Download",
   "children": [
      {  "id": 3,
         "name": "name",
         "text": "text"
      }
   ]
}

and I have input for search. I can search onChange categoryname like this but I want search children names. How can I do this?

    const [searchTerm, setSearchTerm] = useState("");
    const [searchResults, setSearchResults] = useState([]);
    const handleChange = event => {
        setSearchTerm(event.target.value);
    };

    useEffect(() => {
        const results = data.filter(item =>
            item.categoryName.toLowerCase().includes(searchTerm)
        );
        setSearchResults(results);

    }, [searchTerm]);

Piotr Żak · Accepted Answer · 2020-12-25 12:05:02Z

2

Currently You filtering by category name in line:

   item.categoryName.toLowerCase().includes(searchTerm)

You need to filter not by categoryName (case sensitive here) and focus on children.name like this:

   item.children[0].name.toLowerCase().includes(searchTerm)

But this solutions will work only if children array have one object.

For including every objects - You need to iterate thought this array.

let results = [];

for (let i = 0; i < data.children.length; i++) {
   oneChild = data.filter(item =>
       item.children[i].name.toLowerCase().includes(searchTerm)
   )
   results.push(oneChild)
}

After experimenting in sandbox - ii got this function, which filter in subelements of element, which are 2 nested levels

const results = data.map((element) => {
  return {
    ...element,
    subElements: element.children.filter((subElement) =>
      subElement.name.includes(searchTerm)
    )
  };
});

And finally that solution should filter:

  useEffect(() => {
    let filteredArray = data
      .filter((element) =>
        element.children.some((subElement) =>
          subElement.name.includes(searchTerm)
        )
      )
      .map((element) => {
        let newElt = Object.assign({}, element); // copies element
        newElt.subElements = newElt.children.filter((subElement) =>
          subElement.name.includes(searchTerm)
        );
        return newElt;
      });

    setSearchResults(filteredArray);
  }, [searchTerm]);

edited Dec 25, 2020 at 12:05

answered Dec 25, 2020 at 10:58

Piotr Żak

2,1426 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

okh Over a year ago

I tried but it didn't work, it's an element of array. Am I missing something?

Piotr Żak Over a year ago

Can You try with that - item.children[0].name.toLowerCase().includes(searchTerm) and also reproduce code in sandbox?

okh Over a year ago

Thanks :) Here is the sandbox codesandbox.io/s/lingering-microservice-s8h5s

Piotr Żak Over a year ago

@okh let's check the last useEffect at edited question

okh Over a year ago

Sorry, no errors but it doesn't work right :(

|

Collectives™ on Stack Overflow

React hooks how search array child array

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related