Searchbar with changable state

[chriSilv88]

Hello. I'm making a custom search. When page is load table should be hidden and when I searching for something it should change my state and display result with table. Somebody knows why it doesn't change the state?

import React, { useState, useEffect } from "react";
import Loader from '../Loader/Preloader';
import axios from "axios";
import BootstrapTable from 'react-bootstrap-table-next';
import paginationFactory from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';

// import css
import 'bootstrap/dist/css/bootstrap.min.css';

const { SearchBar } = Search;


const FetchCountries = () => {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [visible, setVisible] = useState(false)

    useEffect(() => {
        setLoading(true);
        axios
            .get("https://zmag.azurewebsites.net/api/products/getallfake", {
                headers: {
                    "Content-Type": "application/json"
                }
            })
            .then((res) => {
                setProducts(res.data.data);
                setLoading(false);
            })
            .catch((err) => {
                console.log(err);
            });
    }, []);

    if (loading) {
        return (
            <Loader />
        );
    }

    function handleChange(e) {
        console.log(e.target.value);
    }

    const columns = [{
        dataField: 'ar_codart',
        text: 'Nome del prodotto'
    }, {
        dataField: 'ar_descr',
        text: 'Descrizione del prodotto',
    }, {
        formatter: (rowContent, row) => {
            return (
                <form 
                    className="
                    d-flex 
                    align-middle 
                    justify-content-center" 
                    >
                    <input 
                        type="text" 
                        id="quantity" 
                        className="form-control mr-sm-8 mr-4"
                        placeholder="Aggiungi il numero di prodotti"
                        
                         />
                    
                    <button
                        type="submit"
                        className="btn btn-info col-sm-4"
                    >
                        Aggiungi la quantit&agrave;
                    </button>
                </form>
            )
        }
    }];

    return (
        <>
            <ToolkitProvider
                keyField="id"
                data={products}
                columns={columns}
                search

            >
                {
                    props => (
                        <div>
                            <SearchBar {...props.searchProps} onChange={() => setVisible({ visible: true })}/>
                            <hr />
                            {visible 
                                ? 
                            <BootstrapTable {...props.baseProps}
                                keyField="ar_codart" data={products} columns={columns} hover pagination={paginationFactory()}
                            />  : null }
                        </div>
                    )
                }
            </ToolkitProvider>
        </>
    );
}

export default FetchCountries;

[jklingen92]

@Russlan88 This is not an issue with React Bootstrap Table. You need to learn how React works.

You're biggest problem is probably that your setting visible to an object: onChange={() => setVisible({ visible: true })}

Try this: onChange={() => setVisible(true)}

[chriSilv88]

Thank you a lot))