У меня проблемы с пониманием того, как добавить функцию поиска в одностраничное приложение reactjs

Question

Я действительно хочу понять, правильный ли способ создания и заполнения таблицы из ответа JSON, а затем я хочу добавить кнопку поиска в это одностраничное приложение, которое выполняет поиск и показывает только строку, содержащую этот Ключевое слово в поиске.

Я ищу здесь, какой правильный подход я должен следовать для реализации функции поиска.

class DeviceTable extends Component {
    constructor(props) {
        super(props)
        this.state = {
            devices: [],
            nameID: '',
            searchID: '',
        }
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    //User Input from text box
    handleChange = (e) => {
        e.preventDefault();
        this.setState({ nameID: e.target.value });
    };

    handleSearch = (e) => {
        e.preventDefault();
        this.setState({ searchID: e.target.value });
    };

    async handleSubmit(event) {
        event.preventDefault();
        let deviceNo = this.state.nameID;
        let userIn = (deviceNo).toUpperCase();
        const token = localStorage.getItem("token");
        let url = `https://web/api/device_list/?deviceId=${userIn}`;
        console.log("url ", url)
        await fetch(url, {
            method: "GET",
            headers: { "Content-Type": "application/json" },
            credentials: "same-origin"
        }).then((results) => {
            return results.json();
        }).then(data => {
            this.setState({
                devices: data,
            })
        })
    }

    render() {
        let { devices } = this.state;

        let deviceName = Object.keys(deviceLookup)
            .map(key => {
                return devices[key].holds.map(hold => hold.parentName[0].value.name)
            })

        let holds = Object.keys(devices)
            .map(key => {
                return devices[key].holds.map(hold => hold.name)
            })

        let uniqueCode = Object.keys(devices)
            .map(key => {
                return devices[key].holds.map(hold => hold.name).map(h => {
                    if (devices[key].value.add === undefined) {
                        return devices[key].value.name
                    }
                    else {
                        return devices[key].value.code
                    }
                })
            })

        return ( <form onSubmit={this.handleSubmit}>
                        <input type="text" placeholder="Please enter #" onChange={this.handleChange.bind(this)} />
                        <button type="submit" className="button">Lookup</button>
                    </form>
            <div className="second-wrapper">
                <input type="text" placeholder="Please enter item" value={this.state.searchString} onChange={this.handleSearch} />
                <button type="button" >Search</button>
            </div>
                <div className="wrapper">
                        <table className="table table-striped table-dark" id="table1">
                            <thead align="center" >
                            <tr>
                                <th scope="col">Device Name</th>
                                <th scope="col">Device Code</th>
                                <th scope="col">Holds</th>
                            </tr>
                            </thead>
                            <tbody>
                            <td>
                                {deviceName.map(names => {
                                    return names.map((name, i) => {
                                        return (
                                            <tr key={i}>{name}</tr>)
                                    })
                                })}
                            </td>
                            <td>
                                {uniqueCode.map(codes => {
                                    return codes.map((code, i) => {
                                        return (
                                            <tr key={i}>{code}</tr>
                                        )
                                    })
                                })}
                            </td>
                            <td>
                                {holds.map(holdsL => {
                                    return holdsL.map((hold, i) => {
                                        return (
                                            <tr key={i}>{hold}</tr>
                                        )
                                    })
                                })}
                            </td>
                            </tbody>
                        </table>
                    </div>
        )
    }
}

export default DeviceTable;