1

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>
    );

1 respuesta 1

2

Lo que necesitas es crear un estado global, puedes utilizar redux, o si solo es en este caso en especifico recomiendo usar el contexto de react, en tu caso seria algo asi usando lo ultimo mencionado:

En un archivo llamado context/MyEstadoGlobalContext.js

import React from 'react';
const MyEstadoGlobalContext = React.createContext({ mostrar: false, setMostrar: () => {} 
});
export {MyEstadoGlobalContext};

En tu app.js:

import {MyEstadoGlobalContext} from './context/MyEstadoGlobalContext';
import React from 'react';

function App() {
  const [mostrar, setMostrar] = React.useState(false);
  return (
    <MyEstadoGlobalContext.Provaider value={{mostar, setMostrar}}>
      <TusComponentes />
    <MyEstadoGlobalContext.Provaider>
  );
}

De este modo has creado un estado global con valores iniciales, en el componente donde quieras usar o cambiar este estado recomiendo usar los hooks de react:

import React from 'react';
import {MyEstadoGlobalContext} from './context/MyEstadoGlobalContext';

const {mostrar, setMostrar} = React.useContext(MyEstadoGlobalContext);

Lo anterior lo harias en los lugares en tu proyecto donde necesites el estado global

Con el setMostar cambias el valor de mostrar, por lo que si quieres que se vea harias

setMostrar(true); 

y el componente que quieras que se vea o no, harias algo asi:

{mostrar && <ComponenteParaEsconder/>}

Esta seria la forma mas simple, sin complicarse con redux, te recomiendo leer la documentacion para encontrar mas información, espero haberte ayudado.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.