I'm having a problem, which I think is something simple, but I can't solve it.
I created a function called "openProfile" that changes the initial state, and when clicking on a certain div, it is activated and the menu is opened (the div with class boxLeftWrapper" ), but when the user clicks on the close button, it will close the menu.
So far so good, it works, but when I click again to open the menu, it doesn't work anymore.
import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import * as Styled from './style.jsx';
import jqvLogo from '../../assets/holy-bible-2.png'
import euTeste from '../../assets/teste.jfif'
import euTeste2 from '../../assets/teste-2.jpg'
import { Power,MagnifyingGlass,MonitorPlay, Books, Users, SignOut,WhatsappLogo,Pencil,MicrophoneStage,PersonSimpleRun,FilmSlate,XCircle } from "phosphor-react";
import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import 'react-circular-progressbar/dist/styles.css';
import Calendar from 'react-calendar';
import jqvBack from '../../assets/jqv-dashboard.png'
import 'react-calendar/dist/Calendar.css';
export default function index({handleLogout}) {
const [date, setDate] = useState(new Date());
const [profile, setProfile] = useState(false)
const onChange = date => {
setDate(date)
}
const openProfile = () => {
setProfile(!profile)
console.log(!profile)
}
const options = {
margin: 20,
responsiveClass: true,
nav: false,
dots: false,
loop:true,
center:true,
responsive: {
0: {
items: 1,
autoplay: true,
},
400: {
items: 1,
autoplay: true,
},
600: {
items: 2,
autoplay: true,
},
1000: {
items:3 ,
}
},
};
const optionsSecond = {
margin: 20,
responsiveClass: true,
nav: false,
dots: false,
loop:true,
center:true,
responsive: {
0: {
items: 1,
autoplay: true,
},
400: {
items: 2,
autoplay: true,
},
600: {
items: 3,
autoplay: true,
},
1000: {
items:4 ,
}
},
};
return (
<Styled.Dashboard>
<div className="container-fluid">
<div className="row">
{/* SIDEBAR LEFT */}
<div className="col-md-1 p-0 navigationLeft">
<div className="boxHeaderUser">
<div className="imagemUser">
<img src={jqvLogo} alt="JQV Guarulhos" className="img-fluid" />
</div>
</div>
<div className="navigation">
<nav>
<div className="link active">
<button>
<MonitorPlay/>
{/* <span>Home</span> */}
</button>
</div>
<div className="link">
<button>
<Books/>
{/* <span>Ministérios</span> */}
</button>
</div>
<div className="link">
<button>
<Users/>
{/* <span>Membros</span> */}
</button>
</div>
</nav>
<div className="logout">
<button onClick={handleLogout}> <Power /></button>
</div>
</div>
</div>
{/* SIDEBAR LEFT */}
{/* DASHBOARD MAIN */}
<div className="col-md-11 bgDash">
<div className="row">
<div className="col-md-12 pt-2 pb-3">
<div className="boxHeaderDash">
<div className="row">
<div className="col-md-4">
<div className="titulo">
<h4 className='m-0'>Dashboard</h4>
</div>
</div>
<div className="col-md-8">
<div className="boxSearchandUser">
<div className="search">
<input type="text" name="membro" placeholder='Procure por um dos membros dos jovens....' />
<div className="IconSearc">
<MagnifyingGlass />
</div>
</div>
<div className="userLogged">
<div className="nameUser">
<span>Olá, Godoy!</span>
</div>
<div className="photoUser">
<img src={euTeste} alt="Foto User" className="img-fluid" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="infoBoxes mt-3">
<div className="row">
<div className="col-md-8">
<div className="boxBackogrundJqv" style={{ background: `url(${jqvBack})` }}>
<div className="boxAllBack">
<div className="titulo">
<h3>Lorem Ipsum Dolor!</h3>
</div>
<div className="texto">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet deserunt dignissimos, rerum molestiae eveniet asperiores nostrum fuga cupiditate.</p>
</div>
<div className="botao">
<span>Aproveite!</span>
</div>
</div>
</div>
</div>
<div className="col-md-4 h-100">
<div className="box">
<div className="boxAllCount">
<div className="header">
<h6>Membros Ativos</h6>
</div>
<div className="middle">
<div className="numberTotal">
<span>45</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-8">
{/* MEMBROS CARROSEL */}
<div className="boxMembros">
<div className="titulo">
<h6>Membros</h6>
</div>
<OwlCarousel className='owl-theme' {...options}>
<div className="box"style={{ background: `linear-gradient(to bottom,rgba(0, 0, 0, 0.4) 0,rgba(0,0,0,.6) 100%),url(${euTeste})` }} onClick={openProfile}>
<div className="infoBottom">
<div className="info">
<h6>Felipe Godoy</h6>
</div>
</div>
</div>
</OwlCarousel>
</div>
{/* MEMBROS CARROSEL */}
</div>
<div className="col-md-4">
<div className="boxAniversariantes">
</div>
<div className="outroBox">
<Calendar onChange={onChange} value={date} />
</div>
</div>
</div>
</div>
{
profile &&
<div className="col-md-4 boxLeftWrapper open">
<div className="boxAll">
<div className="header d-flex justify-between align-items-center">
<div className="titulo">
<h1>Perfil</h1>
</div>
<div className="close">
<button onClick={openProfile}>
<XCircle/>
</button>
</div>
</div>
<div className="boxBodyUser">
<div className="foto">
<img src={euTeste} alt="Usuário" className='img-fluid ativo' />
</div>
<div className="nome">
<h5>Felipe Godoy</h5>
</div>
<div className="idade">
<span>24 anos</span>
</div>
<div className="ministerios">
<ul>
<li>Teatro</li>
<li>Mídias Sociais</li>
</ul>
</div>
<div className="status ativo">
<span>Membro Ativo</span>
</div>
<div className="boxContato">
<div className="whatsapp">
<WhatsappLogo/>
<span>Mensagem</span>
</div>
</div>
</div>
</div>
</div>
}
</div>
</div>
</Styled.Dashboard>
)
}
CodePudding user response：
Use a callback
const openProfile = () => {
setProfile(profile => !profile)
}
CodePudding user response：
Try changing openProfile() to:
const openProfile = () => {
setProfile(state => !state, state => console.log(state));
}