Реализация строки поиска приложения на Django-React

Я хочу реализовать строку поиска на одной из моих страниц в приложении Django-React. Я полный новичок в React, и мне сложно добиться желаемых результатов.

В принципе, я создал конечную точку на бэкенде для фильтрации результатов запроса. Он отлично работает в Insomnia. Теперь я хочу сделать то же самое на фронтенде.

мой код на данный момент:

import React, {Component} from "react";
import {Col, Container, Row} from "reactstrap";
import SomeList from "./SomeList";
import NewSomeModal from "./NewSomeModal";

import axios from "axios";

import {BEARER_TOKEN, SOME_API_URL} from "../../constants";

const headers = {
    'Content-Type': 'application/json',
    'Authorization': BEARER_TOKEN
};


class Some extends Component {
    state = {
        someArray: [],
        query: ""
    };

    componentDidMount() {
        this.resetState();
    }

  
    getSomeQuery = () => {
        axios.get(SOME_API_URL + `search?q=${this.state.query}`).then(res => this.setState({results: res.data}));

    };

    resetState = () => {
        this.getSomeQuery();
    };


    render() {
        return (
            <Container>
                <Row>
                    <Col>
                        <NewSomeModal create={true} resetState={this.resetState}/>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <SomeList
                            someArray={this.state.results}
                            query={this.state.query}
                            resetState={this.resetState}
                        />
                    </Col>
                </Row>

            </Container>
        );
    }
}

export default Some;

Здесь я создаю таблицу:

import React, {Component} from "react";
import {Table} from "reactstrap";
import NewSomeModal from "./NewSomeModal";

import ConfirmRemovalModalSome from "./ConfirmRemovalModalSome";




class SomeList extends Component {

    handleChange = (e) => {
        this.setState({query: this.search.value},
            () => {
                this.getSomeQuery()
            })
    }

    render() {


        let myArray = this.props.someArray

        return (
            <div className="myPage">
                <div className="main">

                    <input
                        placeholder="Search..."
                        name="q"
                        ref={input => this.search = input}
                        onChange={this.handleChange}
                    />

                </div>

                <div className="my-table">

                    <Table responsive>
                        <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        {!myArray|| myArray.length <= 0 ? (
                            <tr>
                                <td colSpan="6" align="center">
                                    <b>Nothing here yet</b>
                                </td>
                            </tr>
                        ) : (

                            myArray.map(element=> (
                                <tr key={element.id}>
                                    <td>{element.id}</td>
                                    <td>{element.title}</td>
                                    
                                    <td align="center">
                                        <NewSomeModal
                                            create={false}
                                            element={element}
                                            resetState={this.props.resetState}
                                        />
                                        &nbsp;&nbsp;
                                        <ConfirmRemovalModalSome
                                            id={element.id}
                                            resetState={this.props.resetState}
                                        />
                                    </td>
                                </tr>
                            ))
                        )}
                        </tbody>
                    </Table>
                </div>
            </div>
        )

            ;
    }
}

export default SomeList;

Как я могу получить новый массив после ввода чего-либо в строку поиска?

Вернуться на верх