My question is: I want to ask if I search for "Computer Science" and the "Programming Language" subLayer section appears but if you search for sections in the subLayer such as "HTML" and "CSS" it doesn't appear or can't, why is that? And what needs to be fixed from my coding in reactJS?

This is my json file:

layers :[
    {
      key: "1",
      title: "Computer Science",
      expanded: false,
      subLayer: [
        {
          key: "a",
          title: "Programming Language",
          expanded: false,
          subLayer: [
            {
              key: "a.1",
              title: "HTML",
              expanded: false,
              subLayer: [],
            },
            {
              key: "a.2",
              title: "CSS",
              expanded: false,
              subLayer: [],
            },
          ],
        },
      ],
    },
  ]

Code:

import data from './Data'

const checked = (e) => { }

function List(props) {
  const filteredData = data.layers.filter((el) => {
    if (props.input === '') {
      return el
    }
    return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0
  }) 

  return (
    <Accordion allowMultipleExpanded allowZeroExpanded className="text-sm">
      {filteredData.map((list) => (
        <AccordionItem key={list.key}>
          <AccordionItemHeading>
            <AccordionItemButton>
              <input
                type="checkbox"
                className="mx-2 text-sm"
                value="false"
                onClick={(e) => e.stopPropagation()}
                onChange={checked}
              />
              {list.title}
              <WorkspacesIcon className="WorkspacesIcons" />
            </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            {list.subLayer.length !== 0 ? (
              <>
                {list.subLayer.map((listDetails) => (
                  <Accordion allowMultipleExpanded allowZeroExpanded>
                    <AccordionItem>
                      <AccordionItemHeading>
                        <AccordionItemButton>
                          <input
                            type="checkbox"
                            className="mx-2"
                            value="false"
                            onClick={(e) => e.stopPropagation()}
                            onChange={checked}
                          />
                          {listDetails.title}
                        </AccordionItemButton>
                      </AccordionItemHeading>
                      <AccordionItemPanel />
                      <AccordionItemPanel>
                        {listDetails.subLayer.length !== 0 ? (
                          <>
                            {listDetails.subLayer.map((listDetails1) => (
                              <AccordionItem>
                                <AccordionItemHeading>
                                  <AccordionItemButton>
                                    <input
                                      type="checkbox"
                                      className="mx-2"
                                      value="false"
                                      onClick={(e) => e.stopPropagation()}
                                      onChange={checked}
                                    />
                                    {listDetails1.title}
                                  </AccordionItemButton>
                                </AccordionItemHeading>
                                <AccordionItemPanel />
                              </AccordionItem>
                            ))}
                          </>
                        ) : (
                          ''
                        )}
                      </AccordionItemPanel>
                    </AccordionItem>
                  </Accordion>
                ))}
              </>
            ) : (
              ''
            )}
          </AccordionItemPanel>
        </AccordionItem>
      ))}
    </Accordion>
  )
}

Images:

if i write my code reactJS part filteredData, is there any error in this part:

const filteredData = data.layers.filter((el) => {
    if (props.input === '') {
      return el
    }
    return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0
  }) 

CodePudding user response：

Looking at your code, you are just filtering based on the first layer title (eg: Computer Science) and the first sublayer title (eg: Programming language) only. You need to add another condition to look for the second sublayer. Based on your code your return line would be:

return el.title.toLowerCase().includes(props.input) || el.subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0 || el.subLayer[0].subLayer.findIndex(x => x.title.toLowerCase().includes(props.input)) >= 0 

To make more dynamic for when you have multiple arrays you can do this:

  return (
      el.title.toLowerCase().includes(props.input.toLowerCase()) ||
      el.subLayer.findIndex((x) => x.title.toLowerCase().includes(props.input.toLowerCase())) >= 0 ||
      el.subLayer
        .map(
          (x) =>
            x.subLayer.findIndex((x) => x.title.toLowerCase().includes(props.input.toLowerCase())) >= 0,
        )
        .includes(true)
    )