具有获取API结果的搜索栏（ReactJs）

Question

I was searching of how to do a search bar based on fetch API results. The API json results returns a couple of sofas with their names and images and other aspects that don't matter for this case. I want the search to be based on sofa's names but I don't know how to do it if the components are not parent and child. I will describe below my directories paths:

- src
-- components
--- Home
---- Main (Fetch request for name and image of sofas)
-- containers
--- other_files
--- Search
---- SearchBar.js (Here I need to make a filter search for the sofa name)
-- index.js
-- route.js

Here are the results of fetch, the json:

[
    0:
        brand:
            created_on: "2017-05-02T10:27:23.905454Z"
            id: 1
            image: "/media/filer_public/ac/0b/ac0ba5cb-4f00-4386-aa8b-984919abdf8d/logoluso.png"
            name: "LUSOGRAPH"
            updated_on: "2018-04-09T08:22:52.022891Z"
        category: null
        code: "8ed96b9c"
        created_on: "2017-05-02T10:28:11.951052Z"
        description: "<p><strong>PELE</strong></p>"
        fabric_color_number: 1
        id: 1
        image: "/media/filer_public/f3/59/f3596b6f-1d15-46a5-9b40-f2c275bfd65c/ancora.png"
        is_active: true
        name: "ÂNCORA"
        updated_on: "2018-06-18T09:31:07.512569Z"

    1:
        {id: 2, brand: {…}, category: null, is_active: true, code: "534e44bc", …}
]

Also I will put here my code for the searchBar that is in the file SearchBar.js :

import React from 'react';

export class SearchBar extends React.Component {

    render() {

        return (
            <div id="SearchBar">
                <form>
                    <input type="text" placeholder="Pesquisa" />
                </form>
            </div>
        )
}

}

And now the code of the Main.js page:

import React from 'react';

export class Main extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        token: {},
        isLoaded: false,
        models: []
    };
}

componentDidMount() {

    /* Fetch's to get token */

    fetch(url + '/couch-model/', {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Authorization': 'JWT ' + (JSON.parse(localStorage.getItem('token')).token)
        }
    }).then(res => {
        if (res.ok) {
            return res.json();
        } else {
            throw Error(res.statusText);
        }
    }).then(json => {
        this.setState({
            models: json.results
        }, () => {});
    })
}


render() {

    const { isLoaded, models } = this.state;

    if (!isLoaded) {
        return (<div>Loading...</div>)
    } else {
        return (
                <div>

                    {models.map(model =>
                        <a href="/sofa" key={model.id}>
                            <div className="Parcelas">
                                <img src={"url" + model.image} className="ParcImage" alt="sofa" />
                                <h1>Sofá {model.name}</h1>

                                <button className="Botao">
                                    <p className="MostraDepois">Ver Detalhes</p>
                                    <span>+</span>
                                </button>
                                <img src="../../img/points.svg" className="Decoration" alt="points" />
                            </div>
                        </a>
                    )}

                </div>
            )
        }
    }
}

I don't want to make a new page with results, I want the results to have the same aspect of what you see on the Main.js return code , what means I just want to limitate the results of the fetch, I guess...
Any help is appreciated (if possible without Redux), thank you!

Answer 1

I would place search text inside redux. your main need to look on the redux search text.

in that point you have to use something like this:

const filteredSofas = search === '' ? sofas : filter(sofa => sofa.name.toLowerCase().includes(search.toLowerCase()), sofas);

your main should look on redux search , and that would be something like this:

const mapStateToProps = (state) => ({search: state.search});
export default compose(connect(null, mapDispatchToProps))(Main)