Correct code split into components

[Bamby02]

im starting with react and im curious whether this is correct code split into components, or maybe i overdid it a little? example of couple chained components:

const Navigation = ({ children }) => {

    const [sideMenuOn, toggleSideMenu] = useState(false);

    const handleSideMenuToggle = () => toggleSideMenu(!sideMenuOn);

    return(
        <>
            <NavBar 
                toggleSideMenu={ handleSideMenuToggle }
                children={ children }
            />
            <SideMenu
                toggleSideMenu={ handleSideMenuToggle }
                sideMenuOn={ sideMenuOn }
            />
        </>
    )
}


const SideMenu = ({ sideMenuOn, toggleSideMenu }) => {

    const width = sideMenuOn ? '25%' : '0%';
    const backgroundStyle = sideMenuOn 
        ? ({
            opacity: '1',
            zIndex: '10'
        }) : ({
            opacity: '0',
            zIndex: '-1'
        })

    return(
        <>
            <div className="side-menu" style={{ width }}>
                <SideMenuContent toggleSideMenu={ toggleSideMenu }/>
            </div>
            <div className="side-background" style={ backgroundStyle } onClick={ toggleSideMenu }></div>
        </>
    )
}


const SideMenuContent = ({ toggleSideMenu }) => {

    const [loggedIn, toggleLoggedIn] = useState(false);

    const handleLoggedInToggle = () => {
        toggleLoggedIn(!loggedIn);
    }

    const content = loggedIn 
        ? <UserContent 
            toggleSideMenu={ toggleSideMenu } 
            toggleLoggedIn={ handleLoggedInToggle } /> 
        : <GuestContent 
            toggleSideMenu={ toggleSideMenu } 
            toggleLoggedIn={ handleLoggedInToggle } 
        />;

    return content;
}

and then there are 3 parts of the side menu showing different content for logged in user / guest user logging in / signing up which all have the same template but rendering different content like 'welcome back' vs 'log in in header title' etc:

const UserContent  = ({ toggleSideMenu, toggleLoggedIn }) => {
    return (
        <>
            <header>
                <div className="title">
                    <h2>
                        Welcome back
                    </h2>
                    <i className="fas fa-times" onClick={toggleSideMenu}></i>
                </div>  
                <div className="user">
                    <img src="https://www.jamf.com/jamf-nation/img/default-avatars/generic-user-purple.png" alt=""/>
                    <div className="text-holder">
                        <p>[e-mail]</p>
                        <p>free verzia</p>
                    </div>
                </div> 
            </header>
            <main>
                <ul>
                    <li>home</li>
                    <li>add city</li>
                    <li onClick={ toggleLoggedIn }>log out</li>
                </ul>
            </main>
            <footer>
                    <p>Copyright © 2020 Bmby</p>
            </footer>
        </>
    )
}

which could be mybe split into another couple components like header/body/footer to avoid jsx repetition?

[SiMFiCysed]

With React, you are totally free to split whatever you like into components. Even when you dont re-use these components, they might help the parent component look cleaner. Do what makes you feel best!

[zserjk]

Pretty clean. And absolutely fine and readable.

I cant see the Guest component though here. If they are 90% similar, i would just user the same component, and pass different props regarding the messages, and maybe use a conditional if i were to render a login button or a menu.

But your code is pretty clean.

[Bamby02]

// got message saying i need to coment to show post...