Warning: Expected server HTML to contain a matching <div> in <div>.

[handrei]

Hello guys, I'm writing here because I searched before on google and didn't find any help, hope you guys can help me again...

so the problem is as in the title
Warning: Expected server HTML to contain a matching <div> in <div>. in div (at ProfileDropdown.js:7) in div (at ProfileDropdown.js:6) in ProfileDropdown (at Navigation.js:67)

the code in the ProfileDropdown is :
const ProfileDropdown = ({}) => { return ( <> <div className={styles['dropdown']}> <div> <button className={styles['dropbtn']}>Dropdown</button> </div> <div className={styles['dropdown-content']}> <a href='#'>Link 1</a> <a href='#'>Link 2</a> <a href='#'>Link 3</a> </div> </div> </> ); };

and I'm loading the component in Navigation like this:
{loggedIn() ? ( <ProfileDropdown /> ) : ( <div onClick={openLogin}> <Button text='Sign in'></Button> </div> )}

loggedIn() is a cookie function, that returns true if the user is logged in

[handrei]

hello, I found by myself what was wrong, I was getting the cookie from client-side and when getting it from server-side the problem disappears :)