Tengo un componente Navbar que tiene un boton (Categorias) luego en el componente Searchbar muestra las categorias y un buscador, necesito que desde el boton del componente Navbar pueda ocultar y mostrar el componente searchbar , como lo puedo hacer ? estoy usando React con clases.
el codigo adjuntado esta resumido para no molestar tanto al que pueda ayudarme
Componente Navbar (aqui esta el boton):
<div className="col col-lg-1 btn-sm mr-3 ">
<button
type="button"
className="btn btn-outline-primary btn-sm"
>
Categorias
<i className="material-icons">keyboard_arrow_down </i>
</button>
</div>
Componente Searchbar donde esta lo que tengo que ocultar y mostrar:
_renderCategories() {
let ret = [];
_.each(this.state.menu_categories, (category, key) => {
ret.push(
<LinkContainer
key={`category_${key}`}
to={`/categories/${category.id}`}
className="text-white col category"
>
<a href="/">
<img
alt={category.attributes.name}
src={category.attributes.image}
/>
<br />
{category.attributes.name}
</a>
</LinkContainer>
);
});
return ret;
}
return (
<div className="searchbar bg-primary inverse">
<div className="container">
<div className="d-none d-md-block text-center col-12 categories">
<div className="row justify-content-center align-items-end">
{this._renderCategories()}
</div>
</div>
</div>
</div>
);