0
My question is the following, I have a component in React called Navbar.jsx and would like the title no Navbar changed as soon as another component was opened.
For example, when you open the customer registration screen, change the title to "Customer Registration".
I used the useState HOOK to create the title.
But when opening another component I wanted to change the state of the title to another title once it was rendered, so I try to call with useEffect, but it does not work and gives an error.
"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
Mainclient.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"),[])
....
Thanks, I took a look at the topic, of the options you have, I will initially try Render props, I found enough content on. I’ll understand better and apply it to see how it looks.
– TadeuTr