Boa tarde, estou com uma duvida de iniciante gostaria de saber se alguem pode me ajudar a duvida é o seguinte preciso passar o active que for selecionado no NavBar.js para Home.js para poder renderizar o componente conforme o usuario clica no menu mostrar o component certo mais nao estou conseguindo.
App.js
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom' import Cadastro from './Pages/Cadastro/Cadastro' import Error404 from './Pages/Error404/Error404' import Login from './Pages/Login/Login' import Home from './Pages/Home/Home' import { render } from '@testing-library/react'; // import { Container } from './styles';
export default class App extends Component { render() {
return <BrowserRouter>
<Switch>
<Route path="/" exact={true} component={Login}/>
<Route path="/home" render={(props)=><Home {...props} active={this.props.activeItem} />} />
<Route path="/cadastro" component={Cadastro} />
<Route path='*' component={Error404} />
</Switch> </ BrowserRouter>; } }
Home.js
import React, { Component } from 'react';
// import { Container } from './styles';
import NavBar from '../../Components/Nav/NavBar'
import Error404 from '../Error404/Error404'
import CadPacientes from '../../Components/CadPacientes/CadPacientes'
export default class Home extends Component {
render() {
if(!localStorage.getItem('user') ){
return <Error404 />
}else{
return (<div><NavBar /> <CadPacientes /></div>)
}
}
}
NavBar.js
import React, { Component } from 'react';
import { Icon, Menu } from 'semantic-ui-react'
export default class NavBar extends Component {
constructor(props){
super(props)
this.state={
activeItem: 'gamepad'
}
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })
render() {
const { activeItem } = this.state
return(
<Menu compact icon='labeled'>
<Menu.Item
name='gamepad'
active={activeItem === 'gamepad'}
onClick={this.handleItemClick}
>
<Icon name='home' />
Cadastro de Pacientes
</Menu.Item>
<Menu.Item
name='cadastro paciente'
active={activeItem === 'cadastro paciente'}
onClick={this.handleItemClick}
>
<Icon name='user' />
Visualização
</Menu.Item>
<Menu.Item
name='video play'
active={activeItem === 'video play'}
onClick={this.handleItemClick}
>
<Icon name='video play' />
Sair
</Menu.Item>
</Menu>
)
}
}