Как убирать лишние ноды при фильтрации Json?

Question

[GreaterGlider]

Добрый всем день! Имеется подобная структура json:

spoiler

const json = [
    {
        "type": "node",
        "title": "Title 1",
        "nodes": [
            {
                "type": "unit",
                "name": "Unit01",

            }
        ]
    },
    {
        "type": "node",
        "title": "Title 2",
        "nodes": [
            {
                "type": "node",
                "title": "Title 3",
                "nodes": [
                    {
                        "type": "unit",
                        "name": "Unit10",

                    },
                    {
                        "type": "unit",
                        "name": "Unit11",

                    },
                    {
                        "type": "unit",
                        "name": "Unit12",

                    }
                ]
            },
            {
                "type": "node",
                "title": "Title 4",
                "nodes": [
                    {
                        "type": "unit",
                        "name": "Unit20",

                    }
                ]
            }
        ]
    }
];

export default json;

Я вывожу этот json рекурсивно через два компонента - Node и Unit, полноценное приложение которое можно запустить здесь:

spoiler

import React, { Component} from 'react';
import json from './data'

class Node extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            showUnits: false,
        }
        this.onClickHandle = this.onClickHandle.bind(this);
    }

    onClickHandle(event) {
        event.stopPropagation();
        this.setState({showUnits: !this.state.showUnits});
    }

    render() {

        const {showUnits} = this.state;

        return (

            <div className="node" onClick={this.onClickHandle}>{this.props.node.title}
                <ul className="node__title" >
                {showUnits && this.props.node.nodes.map(node => {
                    if (node.type === "node") {
                        return <Node node={node} value={this.props.value}/>
                    } else {
                        if (node.name.includes(this.props.value))
                            return <Unit unit={node} value={this.props.value}/>
                    }
                })}</ul>
            </div>
        )
    }
}


class Unit extends React.Component {

    render() {

        return (
                <li className="unit__name">{this.props.unit.name}</li>
        )
    }
}


class SearchField extends React.Component {

    constructor(props) {
        super(props);

        this.handleOnChange = this.handleOnChange.bind(this);

        this.state = {
            searchValue: "",
        }
    }

    handleOnChange(event) {
        const {value} = event.target;
        this.setState({searchValue: value})
    }

    render() {
        return (
            <React.Fragment>
                <form className="search-form">
                    <input type="text" className="search-form__input" placeholder="Поиск"
                           onChange={this.handleOnChange}/>
                </form>
                {json.map(node => <Node node={node} value={this.state.searchValue}/>)}
            </React.Fragment>
        )
    }
}


class App extends Component {

    render() {

        return (
            <main>
                <SearchField/>
            </main>
        );
    }
}

export default App;

Так же реализован фильтр по объектам Unit.

Вот как выглядит список в раскрытом виде:


А вот что получаю при фильтре:


Проблема в том, что я хочу скрывать те ноды, в которых не найдено ни одного юнита (то есть ноды Title 2, Title 3 и Title 4 на скриншоте). Пытался делать через коллбэк в компоненте Unit, а так же через React.Children, но никак не получается. Помогите советом, хотя бы в какую сторону копать, уже всю голову изломал.

Answer 1

[0xD34F]

Делаем метод, который будет рекурсивно обходить данные и отбрасывать элементы, у которых имя не содержит искомой строки и нет вложенных элементов (либо изначально не было, либо они отброшены). И отображаем вместо исходных данных результат работы этого метода. Как-то так.

Comments

[GreaterGlider]

Отлично! Спасибо.