0

Tengo un problema, y es que estoy empezando a migrar a react despues de un largo tiempo en vuejs.

Mis problemas principales es la comunicación entre los componentes en vuejs podia utilizar eventBust el cual me permitia pasar datos entre componentes que no se encuentran anidados.

actualmente mi proyecto lo tengo de la siguiente manera:

- pageContent
-- topNavBar
-- views

Necesito mandar el nombre de la pagina a la topNavBar desde un view. He leido que la mejor manera de hacer esto es trabajar con hooks y con clases funcionales. Mi código actual se encuentra de la siguiente manera:

Mi hook

import { useState, useEffect } from 'react';

function useChangeTitleTopBar(initialValue) {
  const [value, setValue] = useState(initialValue);
  const change = () => {
    setValue(initialValue);
  };

  return [value, change];
}

export default useChangeTitleTopBar;

TopNavBar

import useChangeTitleTopBar from './hooks/useChangeTitleTopBar';
const TheTopNavBar = () => {
const [title] = useChangeTitleTopBar('HelloWorld');
//...
return(
<h1>{title}</h1>

Mi pregunta es, como puedo cambiar el titulo desde otro componente y se vea reflejado en mi topNavBar.

1 respuesta 1

1

No se si entendi al 100 tu pregunta, pero pienso que esto te podria funcionar, a tu funcion change le hace falta el parametro con el nuevo titlo, en tu hook estas retornando el valor y tu funcion para cambiar ese valor.

function useChangeTitleTopBar(initialValue) {
  const [value, setValue] = useState(initialValue);
  const change = (newTitle) => {
    setValue(newTitle);
  };

  return [value, change];
}

en tu componente TheTopNavBar(o cualquiera) ya puedes usar tu hook

const TheTopNavBar = () => {
const [title, setTitle] = useChangeTitleTopBar('HelloWorld');

// aqui ya puedes usar setTitle para cambiar el titulo setTitle('otro Titulo')
return(
<h1>{title}</h1>
// ejemplo,
<button onClick={() => setTitle('nuevo titulo')} >click</button>

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.