Minha dúvida é a seguinte, tenho um componente no React chamado NavBar.jsx e gostaria que o titulo no NavBar alterasse assim que outro componente fosse aberto.
Por exemplo, quando abrir a tela de cadastro de cliente, alterar o titulo para "Cadastro de Clientes".
Usei o um HOOK do useState para criar o titulo.
Porém ao abrir outro componente queria alterar o state do titulo para um outro titulo assim que ele fosse renderizado, para isso tento chamar com useEffect, mas não funciona e da um erro.
"Attempted import error: 'setTitulo' is not exported from '../components/NavBar' (imported as 'NavBar')."
NavBar.jsx
import React from 'react';
import { useState } from 'react'
import { Nav, Navbar, NavDropdown } from 'react-bootstrap'
const NavBar = (props) => {
const [titulo, setTitulo] = useState("Controle Diário")
return (
<Navbar className="shadow-lg mb-5 bg-secondary " variant="light">
<Navbar.Brand href="/">
<img
src={logo}
height="40"
className="d-inline-flex align-top"
alt="Logo"
/>
</Navbar.Brand>
<Nav className="mr-auto">
<Nav.Link href="#">Controle Diário</Nav.Link>
<NavDropdown title="Cadastro" id="basic-nav-dropdown">
<NavDropdown.Item href="/clientes">Clientes</NavDropdown.Item>
<NavDropdown.Item href="#">Motorista</NavDropdown.Item>
<NavDropdown.Item href="#">Notas Fiscais</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#">Outros</NavDropdown.Item>
</NavDropdown>
</Nav>
<h4 className="mr-auto font-weight-bold">{titulo}</h4>
</Navbar>
)}
export default NavBar
MainCliente.jsx
import React from 'react';
import { useState, useEffect } from 'react'
import * as NavBar from '../components/NavBar'
const MainClientes = (props) => {
// Esta e a linha que esta gerando o erro
useEffect(NavBar.setTitulo("Cadastro de Clientes"),[])
....